Vue组件的渲染更新原理知识大连串

采用总—分—总的形式跟大家讲解，如果有出现什么错误，欢迎大家指点

一切从这张大图开始，让我们一步一步来分析：

一、初始化

在new Vue()之后，Vue会调用_init函数进行初始化，也就是这里的init过程，它会初始化生命周期、事件、props、methods、data、computed与watch等

二、模板编译

vue在模板编译代码中会执行compileToFunctions将template转化为render函数

const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this); // 将模板编译为render函数

compileToFunctions的主要逻辑如下：

1. 调用parse方法将template转为ast（抽象语法树）

   constast = parse(template.trim(), options)

   使用正则等方式解析template模板中的指令，class，style等数据，形成ast，这就是with语法的过程

2. optimize(ast,options)对静态节点做优化

   这个过程是深度遍历ast，查看每个子树的节点元素是否为静态节点或者静态根节点，如果是静态节点，那么就做个标记，后面update更新页面的时候，会有个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能

3. generate(ast, options)是将ast转为render funtion字符串的过程，得到render的字符串以及staticRenderFns字符,最后通过new Function(render)生成render函数

三、vue的响应式原理

vue.js采用数据劫持结合发布者-订阅者模式方法，通过Object.defineProperty()来劫持各个属性的setter，getter。data中声明的属性都被添加了访问器属性，当读取data中的数据时自动调用getter，当修改data中的数据时，自动调用setter方法，并且检测到数据的变化，会通知观察者Watcher，观察者Watcher自动触发重新render当前组件，生成新的虚拟DOM树，Vue框架会遍历对比新虚拟DOM树和旧虚拟DOM树中的每个节点的差异，并记录下来，最后加载操作，将所有记录的不同点，局部修改到真实DOM树上。

四、虚拟DOM

最后一步就是借助虚拟DOM，来渲染真正的DOM，具体虚拟DOM中的知识，可以查看此文章 叫人头疼的diff算法

总结

初次渲染过程：

• 解析模板为render函数（或在开发环境已完成，vue-loader）
• 触发响应式，监听data属性getter，setter
• 执行render函数，生成vnode，path（elem，vnode）

更新过程：

• 修改data，触发setter（此前在getter中已被监听）
• 重新执行render函数，生成newVnode
• path（vnode，newVnode）