理解vue的实现

从template到dom渲染

都知道vue是一种数据驱动渲染dom的模式,依赖一种 Virtual DOM 的实现,所以 vue 的实现我们简单划分。

1.new Vue()
new Vue() 到底干了什么,首先vue是一个 class ,本质上在js中就是一个 Function ,
实际上执行了一个 init 函数,内容就是初始化这个 vue class 中的参数,

  • 1.初始化生命周期
  • 2.初始化时间
  • 3.初始化render
  • 4.callHook(vm, ‘beforeCreate’) 调用beforeCreate钩子函数并且触发beforeCreate钩子事件
  • 5.initInjections(vm) // resolve injections before data/props
  • 6.initState(vm) 初始化props、methods、data、computed与watch
  • 7.initProvide(vm)()
  • 8.callHook(vm, ‘created’) 调用created钩子函数并且触发created钩子事件

然后$mount组件。

2.模板 template 编译

这里就是执行 $mount ,源码的实现会将 template 编译成 render function, 实现的过程都是需要转成最后的render(),

具体的转换过程,比较复杂,先会调用一个parse(template. options),parse通过正则解析template(字符串)形成AST语法树,之后会调用generate将AST语法树转换成render函数。

render() 函数是根本实现,所有的template都会转成render()

这里是最直接的一步,我们能直接看到template如何变成我们我浏览器里看到的html,

3.Watcher到视图

Watcher对象会通过调用updateComponent方法 将刚得到的render 返回成一个 vNode 节点, 然后会有一个 patch 的过程这里就提到 Virtual DOM 相关比较出名的diff 算法,比较新老 vNode 之间的差距,结果还是会返回一个 vNode

4.映射到真实的DOM
这里 vue 平台做了一个适配层,让后在 Virtual DOM 的某些生命周期给真实的DOM加上各种属性或者监听事件

这就是大纲,我们可以一点一点细化.感觉写下来还不是很清晰,本人阅读源码能力有限,大部分是阅读别人的源码解析文章,然后自己再慢慢理

虚拟Dom实现的本质就是由render() 转换成vNode的节点。

了解响应式

我们的都知道vue的响应式依赖的Object.defineProperty 这个方法,并且vue3修改成基础proxy的新数据监听系统

首先我们针对的是 data 中的数据,在初始化的时候有一个initData function,他会把所有的data中的数据进行oberver,这里数组,对象进行遍历,有一点大家都会提到就是日常处理数组时候的push和pop,vue是通过重写数组的一些方法,对后续增加和修改的元素进行observer,具体可以看源码

下面说下,在第一次渲染的时候,我们使用data的数据,就出发到了getter,这个时候就进行了依赖收集的操作,所谓的依赖收集就是,将wather(观察者)添加到data的一个闭包Deps(订阅者)中,数据改变的时候就是setter去通知watcher,wather进行回调通知组件重新渲染的函数

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注