vue で diff アルゴリズムを使用する方法

今回は、vue で diff アルゴリズムを使用する方法と、vue で diff アルゴリズムを使用する際の 注意事項 について説明します。以下は実際的なケースです。

1. データが変更されると、vue はどのようにノードを更新しますか?

実際の DOM をレンダリングするコストは非常に高いことを知っておく必要があります。たとえば、特定のデータを実際の DOM に直接レンダリングすると、DOM ツリー全体が再描画され、再配置されることがあります。 DOM 全体を更新するのではなく、変更した DOM の一部だけを更新することは可能でしょうか? diff アルゴリズムが役に立ちます。

最初に実際の DOM に基づいて virtual DOM を生成します。virtual DOM 内のノードのデータが変更されると、新しい Vnode が生成されます。を生成してから、Vnode と oldVnode を比較し、相違点が見つかった場合は、実際の DOM 上で直接変更してから、oldVnode の値を作成します。コード> Vnode。

virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode 。

diff的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给 真实的DOM 打补丁。

2. virtual DOM和真实DOM的区别？

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<p>
 </p><p>123</p>

对应的virtual DOM（伪代码）：

var Vnode = {
 tag: 'p',
 children: [
  { tag: 'p', text: '123' }
 ]
};

（温馨提示： VNode 和 oldVNode 都是对象，一定要记住）

3. diff的比较方式？

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

<p>
 </p><p>123</p>


 456

上面的代码会分别比较同一层的两个p以及第二层的p和span，但是不会拿p和span作比较。在别处看到的一张很形象的图：

diff流程图

当数据发生改变时，set方法会让调用 Dep.notify 通知所有订阅者Watcher，订阅者就会调用 patch 给真实的DOM打补丁，更新相应的视图。

具体分析

patch

来看看 patch 是怎么打补丁的（代码只保留核心部分）

function patch (oldVnode, vnode) {
 // some code
 if (sameVnode(oldVnode, vnode)) {
  patchVnode(oldVnode, vnode)
 } else {
  const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
  let parentEle = api.parentNode(oEl) // 父元素
  createEle(vnode) // 根据Vnode生成新元素
  if (parentEle !== null) {
   api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
   api.removeChild(parentEle, oldVnode.el) // 移除以前的旧元素节点
   oldVnode = null
  }
 }
 // some code 
 return vnode
}

patch函数接收两个参数 oldVnode 和 Vnode 分别代表新的节点和之前的旧节点

判断两节点是否值得比较，值得比较则执行 patchVnode

function sameVnode (a, b) {
 return (
 a.key === b.key && // key值
 a.tag === b.tag && // 标签名
 a.isComment === b.isComment && // 是否为注释节点
 // 是否都定义了data，data包含一些具体信息，例如onclick , style
 isDef(a.data) === isDef(b.data) && 
 sameInputType(a, b) // 当标签是<input>的时候，type必须相同
 )
}

不值得比较则用 Vnode 替换 oldVnode

如果两个节点都是一样的，那么就深入检查他们的子节点。如果两个节点不一样那就说明 Vnode 完全被改变了，就可以直接替换 oldVnode 。

虽然这两个节点不一样但是他们的子节点一样怎么办？别忘了，diff可是逐层比较的，如果第一层不一样那么就不会继续深入比较第二层了。（我在想这算是一个缺点吗？相同子节点不能重复利用了...）

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)
  }
 }
}

这个函数做了以下事情：

1. 找到对应的真实dom，称为 el

2. 判断 Vnode 和 oldVnode 是否指向同一个对象，

3. 如果是，那么直接 return 如果他们都有文本节点并且不相等，那么将 el 的文本节点设置为 Vnode 的文本节点。

4. 如果 oldVnode 有子节点而 Vnode 没有，则删除 el diff のプロセスは、patch という名前の 関数

   を呼び出すことです。比較的新しいノードと古いノードがあるため、🎜実際の DOM🎜 を比較し、同時にパッチを適用します。 🎜🎜🎜2. 仮想 DOM と実際の DOM の違いは何ですか? 🎜🎜🎜仮想 DOM は、実際の DOM データを抽出し、オブジェクト🎜 構造の形式でツリー形状をシミュレートします。たとえば、dom は次のようになります: 🎜

   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) {
     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)
    }
   }

   🎜 対応する仮想 DOM (疑似コード): 🎜

   oldS = a, oldE = d；
   S = a, E = b;

   🎜 (注意: VNode と oldVNode は両方ともオブジェクトなので、必ず覚えておいてください)🎜🎜🎜3. 差分を比較する方法は? 🎜🎜🎜 diff アルゴリズムを使用して古いノードと新しいノードを比較する場合、比較は同じレベルでのみ実行され、レベル間では比較されません。 🎜

   oldS = b, oldE = d；
   S = c, E = b;

   🎜上記のコードは、同じレイヤー上の 2 つの p と、2 番目のレイヤー上の p と span を比較しますが、p と spam は比較しません。他の場所で見た非常に鮮明な写真: 🎜🎜🎜

   🎜差分フローチャート🎜🎜🎜 データが変更されると、set メソッドは Dep.notify を呼び出して、すべてのサブスクライバ ウォッチャー、サブスクライバに patch を通知します。 code> が呼び出されて実際の DOM にパッチが適用され、対応する view🎜 が更新されます。 🎜🎜🎜

   🎜詳細な分析🎜🎜

   🎜patch🎜🎜🎜 patch がどのようにパッチされるかを見てみましょう (コードのコア部分のみが保持されます)🎜

   oldS = d, oldE = d；
   S = c, E = d;

   🎜 patch 関数は、それぞれ新しいノードと以前の古いノードを表す 2 つのパラメーター oldVnode と Vnode を受け取ります。 🎜🎜 2 つのノードが比較する価値があるかどうかを判断します。比較する場合は、patchVnode を実行します🎜

   oldS++;
   oldE--;
   oldS > oldE;

   🎜 比較する価値がない場合は、oldVnode を Vnode に置き換えます🎜🎜 両方のノードが同じである場合は、チェックしてください子ノードを詳しく調べます。 2 つのノードが異なる場合は、Vnode が完全に変更されたことを意味し、oldVnode を直接置き換えることができます。 🎜🎜これら 2 つのノードは異なりますが、子ノードが同じ場合はどうすればよいですか? diff はレイヤーごとに比較されることを忘れないでください。最初のレイヤーが異なる場合、2 番目のレイヤーは詳細に比較されません。 (これがデメリットなのだろうか？同じ子ノードは再利用できない…) 🎜🎜🎜patchVnode🎜🎜🎜 2つのノードを比較する価値があると判断した場合、両方のノードにpatchVnodeを指定します。コード>メソッド。それで、この方法は何をするのでしょうか? 🎜<pre class="brush:php;toolbar:false">if (sameVnode(oldStartVnode, newStartVnode)) {  patchVnode(oldStartVnode, newStartVnode) }</pre>🎜この関数は次のことを行います: 🎜<ol class=" list-paddingleft-2"> <li>🎜 <code>el と呼ばれる、対応する実際の dom を見つけます🎜
5. 🎜 Vnode と oldVnode が同じオブジェクトを指しているかどうかを判断します。🎜
6. 🎜そうである場合、両方の場合は直接 return します。テキスト ノードがあり、等しくない場合は、el のテキスト ノードを Vnode のテキスト ノードに設定します。 🎜
7. 🎜 oldVnode には子ノードがあり、Vnode には子ノードがない場合は、el の子ノードを削除します🎜

8. 如果 oldVnode 没有子节点而 Vnode 有，则将 Vnode 的子节点真实化之后添加到 el 如果两者都有子节点，则执行 updateChildren 函数比较子节点，这一步很重要

其他几个点都很好理解，我们详细来讲一下updateChildren

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) {
  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)
 }
}

先说一下这个函数做了什么

1. 将 Vnode 的子节点 Vch 和 oldVnode 的子节点 oldCh 提取出来

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

图解updateChildren

终于来到了这一部分，上面的总结相信很多人也看得一脸懵逼，下面我们好好说道说道。（这都是我自己画的，求推荐好用的画图工具...）

粉红色的部分为oldCh和vCh

我们将它们取出来并分别用s和e指针指向它们的头child和尾child

现在分别对 oldS、oldE、S、E 两两做 sameVnode 比较，有四种比较方式，当其中两个能匹配上那么真实dom中的相应节点会移到Vnode相应的位置，这句话有点绕，打个比方

1. 如果是oldS和E匹配上了，那么真实dom中的第一个节点会移到最后

2. 如果是oldE和S匹配上了，那么真实dom中的最后一个节点会移到最前，匹配上的两个指针向中间移动

3. 如果四种匹配没有一对是成功的，那么遍历 oldChild ， S 挨个和他们匹配，匹配成功就在真实dom中将成功的节点移到最前面，如果依旧没有成功的，那么将 S对应的节点 插入到dom中对应的 oldS 位置， oldS 和 S 指针向中间移动。

再配个图

第一步

oldS = a, oldE = d；
S = a, E = b;

oldS 和 S 匹配，则将dom中的a节点放到第一个，已经是第一个了就不管了，此时dom的位置为：a b d

第二步

oldS = b, oldE = d；
S = c, E = b;

oldS 和 E 匹配，就将原本的b节点移动到最后，因为 E 是最后一个节点，他们位置要一致，这就是上面说的： 当其中两个能匹配上那么真实dom中的相应节点会移到Vnode相应的位置 ，此时dom的位置为：a d b

第三步

oldS = d, oldE = d；
S = c, E = d;

oldE 和 E 匹配，位置不变此时dom的位置为：a d b

第四步

oldS++;
oldE--;
oldS > oldE;

遍历结束，说明 oldCh 先遍历完。就将剩余的 vCh 节点根据自己的的index插入到真实dom中去，此时dom位置为：a c d b

一次模拟完成。

这个匹配过程的结束有两个条件：

oldS > oldE 表示 oldCh 先遍历完，那么就将多余的 vCh 根据index添加到dom中去（如上图） S > E 表示vCh先遍历完，那么就在真实dom中将区间为 [oldS, oldE] 的多余节点删掉

下面再举一个例子，可以像上面那样自己试着模拟一下

当这些节点 sameVnode 成功后就会紧接着执行 patchVnode 了，可以看一下上面的代码

if (sameVnode(oldStartVnode, newStartVnode)) {
 patchVnode(oldStartVnode, newStartVnode)
}

就这样层层递归下去，直到将oldVnode和Vnode中的所有子节点比对完。也将dom的所有补丁都打好啦。那么现在再回过去看updateChildren的代码会不会容易很多呢？

总结

以上为diff算法的全部过程，放上一张文章开始就发过的总结图，可以试试看着这张图回忆一下diff的过程。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Vue二次封装axios插件

怎样使用JS实现文件拖拽上传

以上がvue で diff アルゴリズムを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。