vue3 diff 算法示例

更新时间：2022年07月15日 10:20:40 作者：zhaowenyin

这篇文章主要为大家介绍了vue3 diff 的算法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

一、可能性（常见）：

旧的：a b c
新的：a b c d

旧的： a b c
新的：d a b c

旧的：a b c d
新的：a b c

旧的：d a b c
新的： a b c

旧的：a b c d e i f g
新的：a b e c d h f g

对应的真实虚拟节点（为方便理解，文中用字母代替）：

// vnode对象
const a = {
  type: 'div', // 标签
  props: {style: {color: 'red'}}, // 属性
  children: [], // 子元素
  key: 'key1', // key
  el: '&lt;div style="color: 'red'"&gt;&lt;/div&gt;', // 真实dom节点
  ...
}

二、找规律

去掉前面和后面相同的部分

// c1表示旧的子节点，c2表示新的子节点
const patchKeyedChildren = (c1, c2) =&gt; {
  let i = 0
  let e1 = c1.length - 1
  let e2 = c2.length - 1
  // 从前面比
  while (i &lt;= e1 &amp;&amp; i &lt;= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    // 标签和key是否相同
    // if (n1.type === n2.type &amp;&amp; n1.key === n2.key)
    if (n1 === n2) {
      // 继续对比其属性和子节点
    } else {
      break
    }
    i++
  }
  // 从后面比
  while (i &lt;= e1 &amp;&amp; i &lt;= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    // 标签和key是否相同
    // if (n1.type === n2.type &amp;&amp; n1.key === n2.key)
    if (n1 === n2) {
      // 继续对比其属性和子节点
    } else {
      break
    }
    e1--
    e2--
  }
  console.log(i, e1, e2)
}
// 调用示例
patchKeyedChildren(['a', 'b', 'c', 'd'], ['a', 'b', 'c'])

通过这个函数可以得到：

旧的：a b c
新的：a b c d

i = 3 e1 = 2 e2 = 3

旧的： a b c
新的：d a b c

i = 0 e1 = -1 e2 = 0

旧的：a b c d
新的：a b c

i = 3 e1 = 3 e2 = 2

旧的：d a b c
新的： a b c

i = 0 e1 = 0 e2 = -1

旧的：a b c d e i f g
新的：a b e c d h f g

i = 2 e1 = 5 e2 = 5

扩展：

旧的：a b c
新的：a b c d e f
i = 3 e1 = 2 e2 = 5

旧的：a b c
新的：a b c
i = 3 e1 = 2 e2 = 2

旧的：e d a b c
新的： a b c
i = 0 e1 = 1 e2 = -1

旧的：c d e
新的：e c d h
i = 0 e1 = 2 e2 = 3

从上面结果中我们可以找到规律：

当i大于e1时，只需添加新的子节点
当i大于e2时，只需删除旧的子节点

// 当i大于e1时
if (i > e1) {
  if (i <= e2) {
    while (i <= e2) {
      const nextPos = e2 + 1
      const anchor = nextPos < c2.length ? c2[nextPos].el : null
      // 添加新的子节点c2[i]在anchor的前面
      // todo
      i++
    }
  }
}
// 当i大于e2时
else if (i > e2) {
  if (i <= e1) {
    while (i <= e1) {
      // 删除旧的子节点c1[i]
      // todo
      i++
    }
  }
}

其它，特殊处理

// 其它
let s1 = i
let s2 = i
// 以新的子节点作为参照物
const keyToNewIndexMap = new Map()
for (let i = s2; i <= e2; i++) {
  // 节点的key做为唯一值
  // keyToNewIndexMap.set(c2[i].key, i)
  keyToNewIndexMap.set(c2[i], i)
}
// 新的总个数
const toBePatched = e2 - s2 + 1
// 记录新子节点在旧子节点中的索引
const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
// 循环老的子节点
for (let i = s1; i <= e1; i++) {
  const oldChild = c1[i]
  // let newIndex = keyToNewIndexMap.get(oldChild.key)
  let newIndex = keyToNewIndexMap.get(oldChild)
  // 在新子节点中不存在
  if (newIndex === undefined) {
    // 删除oldChild
    // todo
  } else {
    newIndexToOldIndexMap[newIndex - s2] = i + 1 // 永远不会等于0, 这样0就可以表示需要创建了
    // 继续对比其属性和子节点
    // todo
  }
}
console.log(newIndexToOldIndexMap)
// 需要移动位置
for (let i = toBePatched - 1; i >= 0; i--) {
  let index = i + s2
  let current = c2[index]
  let anchor = index + 1 < c2.length ? c2[index + 1].el : null
  if (newIndexToOldIndexMap[i] === 0) {
    // 在anchor前面插入新的节点current
    // todo
  } else {
    // 在anchor前面插入对应旧节点.el，current.el元素等于对应的旧节点.el（在其它代码中赋值了）
    // todo
  }
}

第1种和第2种比较简单，不做过多的讲解，我们来看看第3种，以下面为例

序号： 0 1 2 3 4 5 6 7
旧的：(a b) c d e i (f g)
新的：(a b) e c d h (f g)

前面a b和后面f g是一样的，会去掉，只剩中间乱序部分
以新的节点为参照物，循环旧的节点，从旧的节点中去掉新的没有的节点，如i
标记旧的中没有的节点，没有就为0，表示需要创建；有就序号+1，表示可以复用

标记： 4+1 2+1 3+1 0
新的：(...) e c d h (...)

从后往前循坏，h为0，创建，放在它下一个f前面；d不为0，复用旧的中的d，放在h前面；c不为0，复用旧的中的c，放在d前面；e不为0，复用旧的中的e，放在c前面

到目的为止，新旧元素的更替已经全部完成，但大家有没有发现一个问题，e c d h四个元素都移动了一次，我们可以看出如果只移动e和创建h，c和d保持不变，效率会更高

三、算法优化

序号： 0 1 2 3 4 5 6 7
旧的：(a b) c d e i (f g)
新的：(a b) e c d h (f g)
对应的标记是[5, 3, 4, 0]

序号：0 1 2 3 4 5
旧的：c d e i f g
新的：e c d f g j
对应的标记是[3, 1, 2, 5, 6, 0]

从上面两个例子中可以看出：
第1个的最优解是找到c d，只需移动e，创建h
第2个的最优解是找到c d f g，只需移动e，创建j

过程：

从标记中找到最长的递增子序列
通过最长的递增子序列找到对应的索引值
通过索引值找到对应的值

注意0表示直接创建，不参与计算

例子：

[3, 1, 2, 5, 6, 0]的最长的递增子序列为[1, 2, 5, 6]，
对应的索引为[1, 2, 3, 4]，
然后我们遍历e c d f g j，标记中为0的，比如j，直接创建；c d f g索引分别等于1 2 3 4，保持不变；e等于0，移动

// 需要移动位置
// 找出最长的递增子序列对应的索引值，如：[5, 3, 4, 0] -> [1, 2]
let increment = getSequence(newIndexToOldIndexMap)
console.log(increment)
let j = increment.length - 1
for (let i = toBePatched - 1; i >= 0; i--) {
  let index = i + s2
  let current = c2[index]
  let anchor = index + 1 < c2.length ? c2[index + 1].el : null
  if (newIndexToOldIndexMap[i] === 0) {
    // 在anchor前面插入新的节点current
    // todo
  } else {
    if (i !== increment[j]) {
      // 在anchor前面插入对应旧节点.el，current.el元素等于对应的旧节点.el（在其它代码中赋值了）
      // todo
    } else { // 不变
      j--
    }
  }
}

最长的递增子序列

// 最长的递增子序列，https://en.wikipedia.org/wiki/Longest_increasing_subsequence
function getSequence(arr) {
  const len = arr.length
  const result = [0] // 以第一项为基准
  const p = arr.slice() // 标记索引，slice为浅复制一个新的数组
  let resultLastIndex
  let start
  let end
  let middle
  for (let i = 0; i < len; i++) {
    let arrI = arr[i]
    if (arrI !== 0) { // vue中等于0，表示需要创建
      resultLastIndex = result[result.length - 1]
      // 插到末尾
      if (arr[resultLastIndex] < arrI) {
        result.push(i)
        p[i] = resultLastIndex // 前面的那个是谁
        continue
      }
      // 递增序列，二分类查找
      start = 0
      end = result.length - 1
      while(start < end) {
        middle = (start + end) >> 1 // 相当于Math.floor((start + end)/2)
        if (arr[result[middle]] < arrI) {
          start = middle + 1
        } else  {
          end = middle
        }
      }
      // 找到最近的哪一项比它大的，替换
      if (arr[result[end]] > arrI) {
        result[end] = i
        if (end > 0) {
          p[i] = result[end - 1] // 前面的那个是谁
        }
      }
    }
  }
  let i = result.length
  let last = result[i - 1]
  while(i-- > 0) {
    result[i] = last
    last = p[last]
  }
  return result
}
console.log(getSequence([5, 3, 4, 0])) // [1, 2]
console.log(getSequence([3, 1, 2, 5, 6, 0])) // [ 1, 2, 3, 4 ]

讲解后续补充...

完整代码

// 最长的递增子序列，https://en.wikipedia.org/wiki/Longest_increasing_subsequence
function getSequence(arr) {
  const len = arr.length
  const result = [0] // 以第一项为基准
  const p = arr.slice() // 标记索引，slice为浅复制一个新的数组
  let resultLastIndex
  let start
  let end
  let middle
  for (let i = 0; i < len; i++) {
    let arrI = arr[i]
    if (arrI !== 0) { // vue中等于0，表示需要创建
      resultLastIndex = result[result.length - 1]
      // 插到末尾
      if (arr[resultLastIndex] < arrI) {
        result.push(i)
        p[i] = resultLastIndex // 前面的那个是谁
        continue
      }
      // 递增序列，二分类查找
      start = 0
      end = result.length - 1
      while(start < end) {
        middle = (start + end) >> 1 // 相当于Math.floor((start + end)/2)
        if (arr[result[middle]] < arrI) {
          start = middle + 1
        } else  {
          end = middle
        }
      }
      // 找到最近的哪一项比它大的，替换
      if (arr[result[end]] > arrI) {
        result[end] = i
        if (end > 0) {
          p[i] = result[end - 1] // 前面的那个是谁
        }
      }
    }
  }
  let i = result.length
  let last = result[i - 1]
  while(i-- > 0) {
    result[i] = last
    last = p[last]
  }
  return result
}
// c1表示旧的子节点，c2表示新的子节点
const patchKeyedChildren = (c1, c2) => {
  let i = 0
  let e1 = c1.length - 1
  let e2 = c2.length - 1
  // 从前面比
  while (i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    // 标签和key是否相同
    // if (n1.type === n2.type && n1.key === n2.key)
    if (n1 === n2) {
      // 继续对比其属性和子节点
    } else {
      break
    }
    i++
  }
  // 从后面比
  while (i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    // 标签和key是否相同
    // if (n1.type === n2.type && n1.key === n2.key)
    if (n1 === n2) {
      // 继续对比其属性和子节点
    } else {
      break
    }
    e1--
    e2--
  }
  console.log(i, e1, e2)
  // 当i大于e1时
  if (i > e1) {
    if (i <= e2) {
      while (i <= e2) {
        const nextPos = e2 + 1
        const anchor = nextPos < c2.length ? c2[nextPos].el : null
        // 添加子节点c2[i]在anchor的前面
        // todo
        i++
      }
    }
  }
  // 当i大于e2时
  else if (i > e2) {
    if (i <= e1) {
      while (i <= e1) {
        // 删除子节点c1[i]
        // todo
        i++
      }
    }
  }
  // 其它
  else {
    let s1 = i
    let s2 = i
    // 以新的子节点作为参照物
    const keyToNewIndexMap = new Map()
    for (let i = s2; i <= e2; i++) {
      // 节点的key做为唯一值
      // keyToNewIndexMap.set(c2[i].key, i)
      keyToNewIndexMap.set(c2[i], i)
    }
    // 新的总个数
    const toBePatched = e2 - s2 + 1
    // 记录新子节点在旧子节点中的索引
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
    // 循环老的子节点
    for (let i = s1; i <= e1; i++) {
      const oldChild = c1[i]
      // let newIndex = keyToNewIndexMap.get(oldChild.key)
      let newIndex = keyToNewIndexMap.get(oldChild)
      // 在新子节点中不存在
      if (newIndex === undefined) {
        // 删除oldChild
        // todo
      } else {
        newIndexToOldIndexMap[newIndex - s2] = i + 1 // 永远不会等于0, 这样0就可以表示需要创建了
        // 继续对比其属性和子节点
        // todo
      }
    }
    console.log(newIndexToOldIndexMap)
    // 需要移动位置
    // 找出最长的递增子序列对应的索引值，如：[5, 3, 4, 0] -> [1, 2]
    let increment = getSequence(newIndexToOldIndexMap)
    console.log(increment)
    let j = increment.length - 1
    for (let i = toBePatched - 1; i >= 0; i--) {
      let index = i + s2
      let current = c2[index]
      let anchor = index + 1 < c2.length ? c2[index + 1].el : null
      if (newIndexToOldIndexMap[i] === 0) {
        // 在anchor前面插入新的节点current
        // todo
      } else {
        if (i !== increment[j]) {
          // 在anchor前面插入对应旧节点.el，current.el元素等于对应的旧节点.el（在其它代码中赋值了）
          // todo
        } else { // 不变
          j--
        }
      }
    }
  }
}
// 调用示例
patchKeyedChildren(['c', 'd', 'e', 'i', 'f', 'g'], ['e', 'c', 'd', 'f', 'g', 'j'])

以上就是vue3 diff 算法示例的详细内容，更多关于vue3 diff 算法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

element-ui配合node实现自定义上传文件方式
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解Vue-cli代理解决跨域问题
本篇文章主要介绍了Vue-cli代理解决跨域问题，详细的介绍了Vue如何设置代理，具有一定参考价值，有兴趣的可以了解一下
2017-09-09
vue中锚点的三种方法
本文给大家带来了vue中锚点的三种方法，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
2018-07-07
带你一文了解Vue生命周期钩子
生命周期钩子又被叫做生命周期时间,生命周期函数,生命周期钩子就是vue生命周期中出发的各类事件,这些事件被称为生命周期钩子,下面这篇文章主要给大家介绍了关于Vue生命周期钩子的相关资料,需要的朋友可以参考下
2022-06-06
vue使用echarts画组织结构图
这篇文章主要介绍了vue使用echarts画组织结构图的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-02-02
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
这篇文章主要介绍了vue仿携程轮播图效果（滑动轮播,下方高度自适应）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
vue-router使用next()跳转到指定路径时会无限循环问题
这篇文章主要介绍了vue-router使用next()跳转到指定路径时会无限循环问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue中遇到的坑之变化检测问题（数组相关）
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vue3中如何使用component :is 加载组件
Monaco-editor,一个vs code 编辑器,需要将其集成到项目,这篇文章主要介绍了Vue3中如何使用component :is 加载组件,需要的朋友可以参考下
2023-11-11
详解Vue.js中的组件传值机制
Vue.js 是一款流行的前端框架,它提供了一些方便的机制来管理组件之间的通信,其中包括组件传值,本文将详细介绍 Vue.js 中的组件传值机制,包括父子组件传值、兄弟组件传值、跨级组件传值等多种方式,需要的朋友可以参考下
2023-08-08