源码解析——VUE

Vue源码解析

vue使用Object.defineProperty+观察者模式对数据和模板进行绑定，对于数据来说需要进行更新时，即会触发对应的getter和setter函数，在setter函数中，即可根据对应收集到的依赖，触发对应视图层更新。

对于一次收集和一次更新来说，大致流程如下：

在这里插入图片描述

• 实例化vue之后，对内部所有的data进行劫持
• 处理对模板的编译/或者静态编译好的render函数，在处理绑定的变量时，创建watcher
• 同时获取当前模块对应的初始值，在读取触发数据局的getter函数，进行绑定
• 绑定成功后，后续触发setter，根据记录的watcher，即可更新所有的模块内容

当然对于模块的编译来说，有运行时编译、静态编译多种形式，同时对于vue来说，vue@2使用了VNode来对模块内容进行了描述，所以在模块编译的流程中，使用VNode能更好的提升编译和更新的性能。

• 编译模块 Compiler
• 数据处理 Observer
• 依赖收集 Watcher/Dep
• 节点VNode/patch更新

对于通用性的理解来说，vue@2和vue@1并没有太多区别，更多的核心在于VNode部分，也就是把编译模块的部分使用了VNode进行描述，编译为了函数形式，以及增加了patch的过程来保证更新。 节点VNode/patch更新流程： patch->patchVNode->updataChildren

• 单独更新一个VNode节点
• 判断children节点更新