vue2源码解读

数据驱动可以说现代前端开发的基石，目前所有主流的框架都采用了数据驱动的模式，它具有减少开发者心智负担，支持前端大规模应用，及提高测试效率等优点。可以说数据驱动导致了前端开发的大繁荣。

我们能像html标签一样使用组件标签，是因为vue帮我们把组件标签转化为html标签，这里面的过程非常的复杂。本文就从源码的角度分析了这个流程，希望能给你带来帮助。

根据AST生成对应的render函数字符串，比如v-if生成对应的三元运算符，v-for生成对应的renderlist函数，这个函数用来生成多个_c('li')。

vue中不仅有原生事件，还有自定义事件，通过把自定义事件的回调定义在父组件中，在子组件中触发从而实现了父子通信。同时，在组件上既可以定义原生事件，也可以通过native修饰符定义原生事件。

v-model的本质是一种:value和@input语法糖，它是通过addProp和addHanlers方法添加到data上，在创建真实DOM时执行对应的module去节点上赋值。

optimize的主要功能是标记一些静态节点，如果是静态节点当update的时候就不会被patchVnode，这样就大大提高了比对速度。

parse的目标是把模板解析生ast数，解析过程就是通过正则不断的匹配，不同的节点就执行不同的函数，并往节点上添加对应的属性，来达到构建AST树。

在利用vue开发项目的时候，不知道你是否在html标签中写v-for 等指令的时候感到好奇，vue是怎么把这些指令转化浏览器能识别的，要想解开这些疑问必须要了解vue的编译过程。

prop初始化时会变成响应式对象，如果里面的属性值是一个普通类型，那么当值改变时就会触发重新渲染。当值是对象类型时，它和父组件data指向同一个地址，当父组件data改变时子组件重新渲染。

每一个组件都对应一个watcher，当数据修改后会更新组件更新，组件内部的更新是通过不断的patchVnode来更新内容的，为什么不直接对每个节点实例化一个watcher呢? 这就是vue1的实现。

不管是计算属性和侦听属性本质上都是一个watcher，在初始化的过程中访问依赖的数据，从而触发数据的getter进行watcher收集，当数据发生变化后，就触发watcher.update进行更新。

对于特殊情况的修改data，比如给对象新增加一个属性，或者操作数组的索引，是不会重新渲染的，需要通过Vue.set来触发重新渲染，这个方法本质上是手动的去执行dep.notify。

nextTick是对多次修改数据进行统一更新做的优化，所以它必须是一个异步过程，实现异步有两种方式，一是微任务，一是宏任务，目前大多数浏览器支持promise，所以nextTick采用的是微任务。

派发更新就是把收集的依赖watcher重新执行一遍render, update方法，实现页面更新，在这个过程中利用nextTick进行了优化，实现了多次修改一次统一渲染。

依赖收集可以理解为在模板中引用了data，那么当改data发生改变的时候重新渲染组件，这个组件就是watcher，这个data响应式对象中的dep对象的subs收集很很多组件watcher。

响应式对象是vue的核心，它的作用作用是当数据修改的时候如何通知对应的组件重新渲染，要实现这个目的需要对data进行劫持，vue2利用Object.defineproperty来实现。

异步组件的本质是2次渲染，第一次渲染是生成一个注释节点，当异步组件成功获取之后，再通过$forceRender进行强制重新渲染，这样就能正常渲染出异步组件了。

组件注册的本质是构造组件的构造函数VueComponent，当在patch的时候，就可以实例化组件构造函数，执行_init，render，patch最后生成真实的DOM。

在create阶段是做数据初始化，比如把data变为响应式。在mounted阶段说明已经把vnode转化为真实dom了，顺序是先子后父。

Vue构造函数有options，用户在实例化Vue过程中也要传入options，那么对不同的选项合并策略是不同的，比如生命周期，合并策略是简单的合并为一个数组。