Vue源码解读——数据驱动（二）

数据驱动的理解

vue是一种mvvm模式的js库，特点就是数据驱动，数据双向绑定，组件化。由于前端变成过程中频繁的操作dom是很消耗性能而且代码不易维护。数据驱动可以让我在开发过程中只关注数据和视图，减少dom操作提高性能，使项目更易读，易维护。

new Vue 发生了什么

new Vue的时候会通过我们传入的参数解析，把el通过mount挂载到vm上，接管DOM，渲染数据，目的是为了把模板最终渲染成DOM。

Vue实例挂载的实现

主要通过Vue.prototype.mount返回mountComponent函数，会执行vm._update(vm._render(),hydrating)渲染真实DOM，并且会有一个渲染Watcher，进行监听，当数据改变的时候，调用vm._update重新渲染。

分析下render函数

Vue.prototype._render会调用我们在初始化Vue时传入的render，并且调用时，返回createElement，createElement返回的是vnode虚拟节点

vue如何实现调用data的时候进行劫持的

vue通过proxy代理模式对data数据进行代理。当我们访问data中的数据的时候，可以省略data，直接访问data中的字段获取值

什么时候虚拟DOM，vnode

虚拟dom就是通过js对真实dom的一个抽象，通过js来模拟dom。这样可以减少dom操作，和渲染次数，节约性能。vue通过vnode实现virtual dom，借鉴了一个开源库snabbdom

分析createElement函数源码实现

主要是把我们的js数据变成vnode，并且会把children变成子vnode，形成vnode tree这样就很想一个真实的dom结构了，下一步就是把vnode渲染成真实的node。回到mountComponet函数就是为了调用createElement生成vnode，然后通过vm._update(vm._render(),hydrating)渲染成真实的dom

vm._update 把VNode渲染成真实DOM

vm._update在初始化的时候调用一次，数据更新的时候回通过渲染Watch重新渲染。

vm._update 调用的是 vm.patch(vm.$el, vnode, hydrating, false /* removeOnly */),参数分别对应 真实DOM，VNode是否开启服务端渲染，removeOnly。

每个平台会有不同的path方法，如服务端没有DOM就是空函数,path会调用createPatchFunction函数，使用函数柯里化来处理不同平台的path，把公用的path代码放在core目录下，不同的path代码放在各平台目录下，通过传参来区分path。之所以使用函数柯里化是因为如果不同平台通过条件语句来判断，会造成每次执行path都需要判断，函数柯里化很好的解决了此问题，在初始化函数的时候就应该把参数传入modules和 nodeOps，并且返回新的函数，直接使用即可。

createPatchFunction会调用createElm根据VNode创建真实DOM并通过insert封装的 DOM API 把VNode映射的真是DOM插入到根节点上，最后把跟节点挂载到HTML文档中

从new Vue 到渲染真实DOM过程：new Vue() -> init -> compile * -> render -> vnode -> _update -> patch -> DOM