1、初始化
调用Vue原型上的_init()
进行初始化,会初始化vue的生命周期,props,data,methods,computed,watch,最重要的是利用Object.definedPropty()对data对象里面的属性设置setter
和getter
函数,也就是来实现响应式
和依赖收集
2、挂载组件
调用$mount挂载组件
3、编译
编译三部曲,parse
(解析)、optimize
(标记静态节点做优化)、generate
(转成字符串)
3.1 parse:利用正则将模板转换成抽象语法树(AST);
3.2 optimize: 标记静态节点,以后update的时候,diff算法可以跳过静态节点
3.3 generate:将抽象语法树(AST)转成字符串,供render去渲染DOM
经过以上步骤,就可以得到render funciton
4、响应式
响应式是vue中我认为最核心的部分,利用Object.definedPropty
设置data所返回的对象后,在进行render function被渲染的时候,会对data对象进行数据读取,会触发getter
函数,从而把data里面的属性进行依赖收集
,依赖收集
的目的是将这些属性放到观察者(Watcher)的观察队列中,一旦我们对data里面的属性进行修改时,就会触发setter
函数,setter
告诉观察者数据变化,需要重新渲染视图,观察者调用update
来更新视图
5、虚拟DOM
render funtion 会被转换成虚拟DOM,虚拟DOM实际上就是一个js对象,从顶层DOM层层描述DOM,有tag, children, isStatic, isComment等等许多属性来做DOM描述
6、更新视图
当数据发生变化时候,会经历setter
=> Watcher
=> update
这些步骤,那么最终是怎么更新视图的呢?
在update的时候,会执行patch
,将新旧VNode传进去,通过diff
算法算出差异,局部更新视图,做到最优化。
Vue.js 内部运行机制 (一) ---- 响应式系统基本原理:https://blog.csdn.net/LL18781132750/article/details/81389881
Vue.js 内部运行机制 (二) ---- 响应式系统的依赖收集追踪原理https://blog.csdn.net/LL18781132750/article/details/81394341