关于一些Vue的文章。（3）

2019年9月14日 287次阅读 来源: 三毛

原文链接我的blog，欢迎STAR。

这次和想要大家分享的一篇文章解析Vue diff 算法

在上篇里，我们提到在渲染时，render>template>el，但是最终，我们得到的都是render函数，那么render函数的作用是什么？接下来该干什么？

带着两个问题，我们深入源码。

首先来解决第一个问题：

  • render函数的作用是什么？

在/src/core/instance/lifecycle.js中有这么一段代码：

 vm._watch = new Watch(vm, updateComponent, noop)

然后找到updateComponent

 updateComponent = () => {
    vm._update(vm._render(), hydrating)
 }

《关于一些Vue的文章。（3）》

意思是，通过Watcher的绑定，当数据发生变化时，会执行updateComponent方法，根据不同的条件，调用的updateComponent也不同，在开发环境下，主要调用的是else
里的updateComponent方法，意思是在执行vm._update方法之前会先执行vm._render()方法。

接着找到vm._render()方法，在src/core/instance/render.js文件里，有这么一段代码：

《关于一些Vue的文章。（3）》

在vm._render方法里，会得到一个VNode对象。至此，第一个问题解决，但是VNode, 又是什么？将在解决第二个问题时，解决。

  • 在已经知晓render函数会得到VNode对象，那么VNode又是什么，下一步又将做什么？

关于VNode, 其实就是Vue.js 2.0 的 Virtual DOM对象,

在/src/core/vdom/vnode.js中，可以看到

VNode具体的一些数据：

《关于一些Vue的文章。（3）》

这些数据，既是对DOM节点的一些描述。

如果你有兴趣，可以做个实验，瞧瞧真实DOM对象，

 const div = document.createElement('div')
 for (let k in div) {
     console.log(k)
 }

倘若每次都生成一个DOM，对性能该是多大的浪费。

于是我们总结出VNode其实Virtual DOM对象，就是用一个简单一点的对象去代替复杂的dom对象。生成VNode，Virtual DOM对象之后，接下来，需要通过DOM Diff，生成真正的DOM节点。

关于DOM diff 说简单点，其实就是所有的变动先发生在Virtual DOM对象上，然后再将实际发生改变的部分反应到真实DOM上。

值得注意的一点是，比较只会在同级进行，并不会跨层级比较

引用来自React’s diff algorithm的一张图：

《关于一些Vue的文章。（3）》

分析源码，在/src/core/vdom/patch.js的patch方法中：

 function patch(oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    // ... 
}

patch函数接收六个参数：

oldVnode: 旧的Virtual DOM或者旧的真实DOM；

vnode：新的Virtual DOM;

hydrating : 是否与真实DOM混合；

removeOnly: 这个在源码里有提到，removeOnly is a special flag used only by <transition-group>也就是说是特殊的flag，用于transition-group组件；

parentElm: 父节点；

refElm: 新节点插入到refElm之前。

分析具体实现思路：

  • 如果vnode不存在，oldVnode 存在，此时需要销毁oldVnode

    if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestoryHook(oldVnode)
return
}

invokeDestroyHook()方法也就是来销毁节点的一个方法。

  • 如果oldVnode不存在，vnode存在，需要调用createElm()方法创建新节点

    if (isUndef(oldVnode)) {
isInitialpatch = true
createElm(vnode, inserteVnodeQueue, parentElm, refElm)
}

isInitialpatch = true 主要用来作延迟插入处理。

  • 如果vnode 与 oldVnode 都存在：

    • 如果oldVnode不为真实节点，且 oldVnode与vnode是同一节点，那么调用patchVnode()方法，（patchVnode稍后详细讲解）。

    const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(old, vnode)) {
   patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)     
}

    • 如果不为同一节点时，当oldVnode是真实节点，并且是元素节点，且含有server-render属性的时候，移除server-render属性，把hydrating 设置为 true,并调用hydrate函数，将Virtual DOM与真实DOM之间进行映射，然后将oldVnode设置为对应的Virtual DOM,找到oldVnode.elm的父节点，根据vnode创建一个真实DOM节点，并插入到该父节点的oldVnode.elm的位置。

  • 最后返回 vnode.elm, 那么和最开始进如的vnode.el 有什么区别在哪？
    其实很简单，因为最开始作为参数传进去的是新的Virtual DOM对象，也就是说不是真实DOM，再具体点，就是 vnode.elm = null. 经过函数返回以后，现在引用的是对应的真实dom。

至此，完成一个patch过程。

下篇里，将从源码解析patchVnode()以及updateChildren()方法。

完。

    原文作者：三毛
    原文地址: https://segmentfault.com/a/1190000008933903
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞