Vue源码解读——数据驱动(二)

数据驱动的理解
【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

    推荐阅读