初始化 挂载
在new Vue() 之后，Vue会调用_init函数进行初始化，也就是图中的init过程，它会初始化生命周期、事件、props、methods、data、computed与watch等。其中最重要的就是通过Object.defineProperty设置setter与getter函数，用来实现响应式以及收集依赖。
初始化之后调用$mount会挂载组件，如果是运行时编译，即不存在render function但是存在template的情况，需要进行编译步骤。
编译
compile编译可以分成parse、optimize、generate三个阶段，最终需要得到render function。
parse 会用正则等干事解析template模板中的指令、class、style等数据，形成AST。
optimize的主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。
generate 是将AST转化为render function字符串的过程，得到的结果是render的字符串以及staticRenderFns字符串。
在经历过parse、optimize与generate三个阶段后，组件就会存在渲染VNode所需的render function了。
响应式
更新视图
通过setter=>Watcher=>update的流程来修改对应视图
当数据变化时，执行render function就可以得到一个新的VNode节点，我们如果想得到新的视图，简单的变化时直接解析这个新的VNode，然后全部渲染到真实DOM中，但是如果只对其中一小部分内容作了修改，未免真个代价太大。
这时候我们就需要用到patch ，通过比较只修改这些有差异的DOM即可，为什么不直接对比DOM而是对弈Virtual DOM，因为DOM的对应性能远远大于直接对比JS对象
若有收获，就点个赞吧
0 人点赞
