Vue3 diff算法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue3 diff算法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1778字，纯文字阅读大概需要3分钟。

内容图文

vue2 diff

Vue2的diff算法执行updatevnode比较新旧节点时会优先处理特殊场景，即头头比对，头尾比对，尾头比对等，并借助key值找到可复用的节点进行相关操作，有效减少移动节点的次数。

vue3 diff

Vue3中移动节点时会先执行函数运用了动态规划的思想生成最长增长子序列的下标。
观察源码：

function getSequence(arr) {
  const p = arr.slice()                 //  拷贝原始数据并保存
  const result = [0]                    //  存储最长增长子序列的索引数组
  let i, j, u, v, c
  const len = arr.length
  for (i = 0; i < len; i++) {
    const arrI = arr[i]
    if (arrI !== 0) {
      j = result[result.length - 1]     //  j是子序列索引最后一项
      if (arr[j] < arrI) {              //  如果arr[i] > arr[j], 当前值比最后一项还大，可以直接push到索引数组(result)中去
        p[i] = j                        //  p记录第i个位置的索引变为j
        result.push(i)
        continue
      }
      u = 0                             //  数组的第一项
      v = result.length - 1             //  数组的最后一项
      while (u < v) {                   //  如果arrI <= arr[j] 通过二分查找，将i插入到result对应位置；u和v相等时循环停止
        c = ((u + v) / 2) | 0           //  二分查找 
        if (arr[result[c]] < arrI) {
          u = c + 1                     //  移动u
        } else {
          v = c                         //  中间的位置大于等于i,v=c
        }
      }
      if (arrI < arr[result[u]]) {
        if (u > 0) {
          p[i] = result[u - 1]          //  记录修改的索引
        }
        result[u] = i                   //  更新索引数组(result)
      }
    }
  }
  u = result.length
  v = result[u - 1]
  //把u值赋给result  
  while (u-- > 0) {                     //  最后通过p数组对result数组进行进行修订，取得正确的索引
    result[u] = v
    v = p[v];                        
  }
  return result
}

如数组[11，3，5，9，7]，执行函数返回的结果为[1，2，4]

找到了此数组最长增长子序列对应的下标值，就能找出新旧节点中不需要移动的节点，直接原地复用，接下来只要操作其他节点就好了。
相较与vue2，更能有效复用dom，减少dom操作次数，提升了替换的效率。

内容总结

以上是互联网集市为您收集整理的Vue3 diff算法全部内容，希望文章能够帮你解决Vue3 diff算法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---