vue框架怎么做响应式_Vue 及框架响应式系统原理

全局概览

Vue运行内部运行机制 总览图：

初始化及挂载

在 new Vue()之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」，后面会详细讲到，这里只要有一个印象即可。

初始化之后调用 $mount 会挂载组件，如果是运行时编译，即不存在render function但是存在 template 的情况，需要进行「编译」步骤。

因为编译有构建时编译与运行时编译的，其目的都是将template转化炒年糕render function，所以如果运行时检查到template存在但是没有render function的情况下会把template编译成render function。

编译

compile编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function

parse(解析)

parse 会用正则等方式解析 template 模板中的指令、class、style等数据，形成AST。

optimize(优化)

optimize 的主要作用是标记 static 静态节点，这是 Vue 在编译过程中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。

generate(生成)

generate 是将 AST 转化成 render function 字符串的过程，得到结果是 render 的字符串以及 staticRenderFns 字符串。

在经历过 parse、optimize 与 generate 这三个阶段以后，组件中就会存在渲染 VNode 所需的 render function 了。

响应式

接下来也就是 Vue.js 响应式核心部分。

这里的 getter 跟 setter 已经在之前介绍过了，在 init 的时候通过 Obje