vue运行机制

最新推荐文章于 2024-06-14 13:50:37 发布

转载最新推荐文章于 2024-06-14 13:50:37 发布 · 594 阅读

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/fd00e25ff146

文章标签：

本文详细解读了在引入Vue.js时，newVue()方法的作用，包括初始化组件、响应式数据处理、虚拟DOM编译与更新过程。重点剖析了响应式的核心原理和虚拟DOM的运用，以及视图如何根据数据变化进行高效更新。

摘抄自：https://www.jianshu.com/p/fd00e25ff146

引入vue.js，new Vue()干了什么呢？

初始化
调用Vue原型上的_init()进行初始化，会初始化vue的生命周期,props,data,methods,computed,watch，最重要的是利用Object.definedPropty()对data对象里面的属性设置setter和getter函数，也就是来实现响应式和依赖收集
挂载组件
调用$mount挂载组件
编译
编译三部曲，parse（解析）、optimize（标记静态节点做优化）、generate（转成字符串）
3.1 parse：利用正则将模板转换成抽象语法树（AST）；
3.2 optimize：标记静态节点，以后update的时候，diff算法可以跳过静态节点
3.3 generate：将抽象语法树（AST）转成字符串，供render去渲染DOM

经过以上步骤，就可以得到render funciton

响应式
响应式是vue中我认为最核心的部分，利用Object.definedPropty 设置data所返回的对象后，在进行render function被渲染的时候，会对data对象进行数据读取，会触发getter函数，从而把data里面的属性进行依赖收集，依赖收集的目的是将这些属性放到观察者（Watcher）的观察队列中，一旦我们对data里面的属性进行修改时，就会触发setter函数，setter告诉观察者数据变化，需要重新渲染视图，观察者调用update来更新视图
虚拟DOM
render funtion 会被转换成虚拟DOM，虚拟DOM实际上就是一个js对象，从顶层DOM层层描述DOM，有tag, children, isStatic, isComment等等许多属性来做DOM描述
更新视图
当数据发生变化时候，会经历setter => Watcher => update这些步骤，那么最终是怎么更新视图的呢？
在update的时候，会执行patch，将新旧VNode传进去，通过diff算法算出差异，局部更新视图，做到最优化。

最后上一张完整结构图