解析vue2.0的diff算法

最新推荐文章于 2024-07-25 20:25:49 发布
最新推荐文章于 2024-07-25 20:25:49 发布
阅读量764 收藏 1
点赞数
分类专栏： 前端 文章标签： vue diff

解析vue2.0的diff算法

前言

vue2.0 加入了 virtual dom，有向 react 靠拢的意思。vue 的 diff 位于 patch.js 文件中，我的一个小框架 aoy 也同样使用此算法，该算法来源于 snabbdom，复杂度为 O(n)。
了解 diff 过程可以让我们更高效的使用框架。
本文力求以图文并茂的方式来讲明这个 diff 的过程。

virtual dom

如果不了解 virtual dom，要理解 diff 的过程是比较困难的。虚拟 dom 对应的是真实 dom，使用 document.CreateElement 和 document.CreateTextNode 创建的就是真实节点。

我们可以做个试验。打印出一个空元素的第一层属性，可以看到标准让元素实现的东西太多了。如果每次都重新生成新的元素，对性能是巨大的浪费。

var mydiv = document.createElement('div');
for(var k in mydiv ){
  console.log(k)
}

virtual dom 就是解决这个问题的一个思路，到底什么是 virtual dom 呢？通俗易懂的来说就是用一个简单的对象去代替复杂的 dom 对象。
举个简单的例子，我们在 body 里插入一个 class 为 a 的 div。

var mydiv = document.createElement('div');
mydiv.className = 'a';
document.body.appendChild(mydiv);

对于这个 div 我们可以用一个简单的对象 mydivVirtual 代表它，它存储了对应 dom 的一些重要参数，在改变 dom 之前，会先比较相应虚拟 dom 的数据，如果需要改变，才会将改变应用到真实 dom 上。

//伪代码
var mydivVirtual = { 
  tagName: 'DIV',
  className: 'a'
};
var newmydivVirtual = {
   tagName: 'DIV',
   className: 'b'
}
if(mydivVirtual.tagName !== newmydivVirtual.tagName || mydivVirtual.className  !== newmydivVirtual.className){
   change(mydiv)
}

// 会执行相应的修改 mydiv.className = 'b';
//最后  <div class='b'></div>

读到这里就会产生一个疑问，为什么不直接修改 dom 而需要加一层 virtual dom 呢？

很多时候手工优化 dom 确实会比 virtual dom 效率高，对于比较简单的 dom 结构用手工优化没有问题，但当页面结构很庞大，结构很复杂时，手工优化会花去大量时间，而且可维护性也不高，不能保证每个人都有手工优化的能力。至此，virtual dom 的解决方案应运而生，virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达平衡。

virtual dom 另一个重大意义就是提供一个中间层，我们可以用 js 去写 ui，ios 安卓之类的渲染层，就像 reactNative 一样。

分析 diff

一篇相当经典的文章 React’s diff algorithm 中的图，react 的 diff 其实和 vue 的 diff 大同小异。所以这张图能很好的解释过程。比较只会在同层级进行, 不会跨层级比较。
在这里插入图片描述
举个形象的例子。

<!-- 之前 -->
<div>           <!-- 层级1 -->
  <p>            <!-- 层级2 -->
    <b> aoy </b>   <!-- 层级3 -->   
    <span>diff</Span>
  </P> 
</div>

<!-- 之后 -->
<div>            <!-- 层级1 -->
  <p>             <!-- 层级2 -->
      <b> aoy </b>        <!-- 层级3 -->
  </p>
  <span>diff</Span>
</div>

对于上面的变化，我们可能期望将 <span> 直接移动到 <p> 的后边，这是最优的操作。但是实际的 diff 操作是移除 <p> 里的 <span> 在创建一个新的 <span> 插到 <p> 的后边。
因为新加的 <span> 在层级2，旧的在层级3，属于不同层级的比较。

源码分析

文中的代码位于 aoy-diff 中，已经精简了很多代码，留下最核心的部分。
diff 的过程就是调用 patch 函数，就像打补丁一样修改真实 dom。

function patch (oldVnode, vnode) {
	if (sameVnode(oldVnode, vnode)) {
		patchVnode(oldVnode, vnode)
	} else {
		const oEl = oldVnode.el
		let parentEle = api.parentNode(oEl)
		createEle(vnode)
		if (parentEle !== null) {
			api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
			api.removeChild(parentEle, oldVnode.el)
			oldVnode = null
		}
	}
	return vnode
}

patch 函数有两个参数，vnode 和 oldVnode，也就是新旧两个虚拟节点。在这之前，我们先了解完整的 vnode 都有什么属性，举个一个简单的例子:

// body下的 <div id="v" class="classA"><div> 对应的 oldVnode 就是
{
  el:  div  //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
  tagName: 'DIV',   //节点的标签
  sel: 'div#v.classA'  //节点的选择器
  data: null,       // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点的textContent，否则为null
}

需要注意的是，el 属性引用的是此 virtual dom 对应的真实 dom，patch 的 vnode 参数的 el 最初是 null，因为 patch 之前它还没有对应的真实 dom。

来到 patch 的第一部分，

if (sameVnode(oldVnode, vnode)) {
	patchVnode(oldVnode, vnode)
}

sameVnode 函数就是看这两个节点是否值得比较，代码相当简单：

function sameVnode(oldVnode, vnode){
	return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}

两个 vnode 的 key 和 sel 相同才去比较它们，比如 p 和 span，div.classA 和 div.classB 都被认为是不同结构而不去比较它们。

如果值得比较会执行 patchVnode(oldVnode, vnode)，稍后会详细讲 patchVnode 函数。

当节点不值得比较，进入 else 中

else {
	const oEl = oldVnode.el
	let parentEle = api.parentNode(oEl)
	createEle(vnode)
	if (parentEle !== null) {
		api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
		api.removeChild(parentEle, oldVnode.el)
		oldVnode = null
	}
}

过程如下：

  • 取得 oldvnode.el 的父节点，parentEle 是真实 dom
  • createEle(vnode) 会为 vnode 创建它的真实 dom，令 vnode.el =真实 dom
  • parentEle 将新的 dom 插入，移除旧的 dom

当不值得比较时，新节点直接把老节点整个替换了

最后

return vnode

patch 最后会返回 vnode，vnode 和进入 patch 之前的不同在哪？
没错，就是 vnode.el，唯一的改变就是之前 vnode.el = null, 而现在它引用的是对应的真实 dom。

var oldVnode = patch (oldVnode, vnode)

至此完成一个 patch 过程。

patchVnode

两个节点值得比较时，会调用 patchVnode 函数

patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
    	if (oldCh && ch && oldCh !== ch) {
	    	updateChildren(el, oldCh, ch)
	    }else if (ch){
	    	createEle(vnode) //create el's children dom
	    }else if (oldCh){
	    	api.removeChildren(el)
	    }
    }
}

const el = vnode.el = oldVnode.el 这是很重要的一步，让 vnode.el 引用到现在的真实 dom，当 el 修改时，vnode.el 会同步变化。

节点的比较有5种情况

1、 if (oldVnode === vnode)，他们的引用一致，可以认为没有变化。
2、if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，需要修改，则会调用 Node.textContent = vnode.text。
3、if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点，而且它们不一样，这样我们会调用 updateChildren 函数比较子节点，这是 diff 的核心，后边会讲到。
4、else if (ch)，只有新的节点有子节点，调用 createEle(vnode)，vnode.el 已经引用了老的 dom 节点，createEle 函数会在老 dom 节点上添加子节点。
5、else if (oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点。

updateChildren

updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
            if (oldStartVnode == null) {   //对于vnode.key的比较，会把oldVnode = null
                oldStartVnode = oldCh[++oldStartIdx] 
            }else if (oldEndVnode == null) {
                oldEndVnode = oldCh[--oldEndIdx]
            }else if (newStartVnode == null) {
                newStartVnode = newCh[++newStartIdx]
            }else if (newEndVnode == null) {
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newStartVnode)) {
                patchVnode(oldStartVnode, newStartVnode)
                oldStartVnode = oldCh[++oldStartIdx]
                newStartVnode = newCh[++newStartIdx]
            }else if (sameVnode(oldEndVnode, newEndVnode)) {
                patchVnode(oldEndVnode, newEndVnode)
                oldEndVnode = oldCh[--oldEndIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newEndVnode)) {
                patchVnode(oldStartVnode, newEndVnode)
                api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
                oldStartVnode = oldCh[++oldStartIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldEndVnode, newStartVnode)) {
                patchVnode(oldEndVnode, newStartVnode)
                api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
                oldEndVnode = oldCh[--oldEndIdx]
                newStartVnode = newCh[++newStartIdx]
            }else {
               // 使用key时的比较
                if (oldKeyToIdx === undefined) {
                    oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
                }
                idxInOld = oldKeyToIdx[newStartVnode.key]
                if (!idxInOld) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    newStartVnode = newCh[++newStartIdx]
                }
                else {
                    elmToMove = oldCh[idxInOld]
                    if (elmToMove.sel !== newStartVnode.sel) {
                        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    }else {
                        patchVnode(elmToMove, newStartVnode)
                        oldCh[idxInOld] = null
                        api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                    }
                    newStartVnode = newCh[++newStartIdx]
                }
            }
        }
        if (oldStartIdx > oldEndIdx) {
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
        }else if (newStartIdx > newEndIdx) {
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
}

代码很密集，为了形象的描述这个过程，可以看看这张图。
在这里插入图片描述

过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。

具体的 diff 分析

设置 key 和不设置 key 的区别：
不设 key，newCh 和 oldCh 只会进行头尾两端的相互比较，设 key 后，除了头尾两端的比较外，还会从用 key 生成的对象 oldKeyToIdx 中查找匹配的节点，所以为节点设置 key 可以更高效的利用 dom。

diff 的遍历过程中，只要是对 dom 进行的操作都调用 api.insertBefore，api.insertBefore 只是原生 insertBefore 的简单封装。
比较分为两种，一种是有 vnode.key 的，一种是没有的。但这两种比较对真实 dom 的操作是一致的。

对于与 sameVnode(oldStartVnode, newStartVnode) 和 sameVnode(oldEndVnode,newEndVnode) 为 true 的情况，不需要对 dom 进行移动。

总结遍历过程，有3种 dom 操作：

1、当 oldStartVnode，newEndVnode 值得比较，说明 oldStartVnode.el 跑到 oldEndVnode.el 的后边了。

图中假设 startIdx 遍历到1。
在这里插入图片描述

2、当 oldEndVnode，newStartVnode 值得比较，说明 oldEndVnode.el 跑到了newStartVnode.el 的前边。（这里笔误，应该是 “ oldEndVnode.el 跑到了oldStartVnode.el 的前边”，准确的说应该是 oldEndVnode.el 需要移动到 oldStartVnode.el 的前边”）
在这里插入图片描述

3、newCh 中的节点 oldCh 里没有， 将新节点插入到 oldStartVnode.el 的前边。
在这里插入图片描述

在结束时，分为两种情况：

1、oldStartIdx > oldEndIdx，可以认为oldCh先遍历完。当然也有可能newCh此时也正好完成了遍历，统一都归为此类。此时newStartIdx和newEndIdx之间的vnode是新增的，调用addVnodes，把他们全部插进before的后边，before很多时候是为null的。addVnodes调用的是insertBefore操作dom节点，我们看看insertBefore的文档：parentElement.insertBefore(newElement, referenceElement)
如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中，newElement首先会从DOM树中移除。所以before为null，newElement将被插入到子节点的末尾。
在这里插入图片描述

2、newStartIdx > newEndIdx，可以认为newCh先遍历完。此时 oldStartIdx 和 oldEndIdx 之间的 vnode 在新的子节点里已经不存在了，调用 removeVnodes 将它们从 dom 里删除。
在这里插入图片描述

下面举个例子，画出 diff 完整的过程，每一步 dom 的变化都用不同颜色的线标出。
1、a,b,c,d,e 假设是4个不同的元素，我们没有设置 key 时，b没有复用，而是直接创建新的，删除旧的。
在这里插入图片描述

2、当我们给4个元素加上唯一key时，b得到了的复用。
在这里插入图片描述

这个例子如果我们使用手工优化，只需要3步就可以达到。

总结

  • 尽量不要跨层级的修改dom
  • 设置key可以最大化的利用节点
  • diff的效率并不是每种情况下都是最优的

原文地址

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logoVue学习交流，或者手动search群号：685486827


写在最后： 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

Never Yu
关注
专栏目录
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
【vue】diff 算法详解
蜗牛的博客
12-20 1万+
diff算法详解
vue中的diff算法
热门推荐
田兴的博客
01-15 2万+
一、是什么diff算法 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法更新的例子： 新旧VNode节
react中diff算法和vue中的diff算法区别。
最新发布
A1_wang的博客
07-25 1636
虚拟dom，就是我们在页面上展示的dom结构叫做dom树，我们把数据和将要渲染的代码模拟dom结构生成的对象类型的数据结构,就叫虚拟dom树，将真实的DOM数据抽取出来，以对象的形式模拟树形结构，我们先根据真实dom生成一课virtual DOM，当virtual DOM某个节点数据改变后会生成一个新的Vnode，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode。
详解vue的diff算法
weixin_34319817的博客
05-19 781
前言 目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我...
关于Vue中Diff算法详解
bigpatten的博客
01-31 1951
vue双向绑定(Diff)原理：当数据发生改变时，发布消息给订阅者watcher， 然后watcher就会调用patch给真实DOM打补丁，更新相应的视图。
解析Vue 2.5的Diff算法
08-28
Vue 2.5 的 Diff 算法是其更新虚拟 DOM 以实现高效视图更新的关键部分。在 Vue 中，Virtual DOM 是一种轻量级的数据结构，它模拟了实际的 DOM，允许框架在内存中比较两个不同的树，然后只对最小化的改动进行实际的 ...
vue的diff算法知识点总结
08-27
Vue 的 Diff 算法是其虚拟 DOM 优化的核心，用于高效地对比新旧虚拟节点 (VNode) 集合，找出最小的变更并更新实际的 DOM 结构。在这个过程中，Vue 避免了不必要的DOM操作，提高了性能。 首先，虚拟节点 (VNode) 是 ...
vue的diff算法详解（看完谁问都不慌了）
常来常往，共同成长
01-12 3785
diff算法是一种通过同层的树节点进行比较的高效算法，其有两个特点： 1.比较只会在同层级进行, 不会跨层级比较 2.在diff比较的过程中，循环从两边向中间比较 diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较
面试官：了解过vue中的diff算法吗？说说看
weixin_44475093的博客
12-25 1751
一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景...
vue diff算法
block_xu的博客
04-28 3674
vue diff算法 在vue中的实现原理，patch函数、patchVnode、updateChildren、sameVnode函数的介绍
Vue之diff算法
玉案轩窗的博客
06-26 1467
前言 Vue通过双向绑定来实现数据驱动视图更新，当数据更新会触发Dep对象notify通知所有的订阅者Watcher对象，Watcher对象最后会调用run来执行Watcher对象的getter方法。 其中需要注意的是在挂载阶段创建的一个Watcher对象的getter就是用于updateComponent，其中最主要方法就是调用Vue.prototype._update，而该实例方法主要进行调用patch函数进行节点的diff比较。 patch函数逻辑 通过阅读Vue源码可知，patch函数的逻辑实际上主
Vue--diff算法（详解）
qq_57956183的博客
05-10 1024
Vue的diff算法是用来比较虚拟DOM的差异性的算法，通过比较前后两个虚拟DOM的差异，然后根据差异进行最小化更新，从而避免重新渲染整个页面，提高了页面的性能。在新旧虚拟节点的比对过程中，为了提高比对效率，需要为新旧虚拟节点创建映射表，将新旧节点的对应关系记录下来，方便后续比对过程中的查找和匹配。1. key：表示每个节点的唯一标识，在新旧虚拟节点的比较过程中用于判断节点是否相同，如果没有指定key，则会使用节点的索引作为key。1. nodeOps：用于操作真实DOM节点的方法，如创建、删除、插入等。
Vue2 Diff算法总结（图文结合）
weixin_42125732的博客
01-12 818
Vue2 Diff算法
Vue2源码-diff算法详解
weixin_46831501的博客
07-28 1936
能在映射表中找到，那就将这个节点进行复用并且将他移动到旧的头部节点前，这里需要注意一下，将这个节点移出去以后会导致他本身的位置空缺，然后后面的节点就会往前补位，导致索引错乱的问题，所以为了不让这个问题出现，就需要在原来节点的地方给他赋值一个null来填补。当尾指针也匹配失败的时候，就需要通过旧节点头部与新节点尾部比对，旧节点尾部与新节点头部比对的方式来进行，比对到相同节点后，通过insertBefore这个api来操作节点，inseetBefore是具备移动性的，移动走了，原来的就不存在了。...
前端开发--快速了解Vue中的diff算法
weixin_51059952的博客
08-10 815
diff算法如何比较新旧虚拟DOM?根元素改变 – 删除当前DOM树重新建根元素未变, 属性改变 – 更新属性根元素未变, 子元素/内容改变无key – 就地更新 / 有key – 按key比较key值要求是唯一不重复的字符串或者数值key的值有id用id, 没id用索引key的好处：可以配合虚拟DOM提高更新的性能。...............
深入解析Vue的Diff算法实现
Vue.js的Diff算法是其虚拟DOM（Virtual DOM）机制的核心，用于高效地更新DOM树。在数据变化时，Vue并不会直接操作真实DOM，而是先基于当前状态构建一个新的虚拟DOM树，然后通过比较新旧两棵树的差异（即Diff过程），...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值