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

  • Post author:
  • Post category:vue

数据驱动的理解

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

new Vue 发生了什么

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

Vue实例挂载的实现

主要通过Vue.prototype.$mount实现示例挂载,$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


版权声明:本文为wanda000原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。