vue3 diff算法怎么应用(diff,vue3,开发技术)

1.

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

2.

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

3.

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

4.

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

5.

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

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

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

通过这个函数可以得到：

1.

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

i = 3 e1 = 2 e2 = 3

2.

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

i = 0 e1 = -1 e2 = 0

3.

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

i = 3 e1 = 3 e2 = 2

4.

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

i = 0 e1 = 0 e2 = -1

5.

旧的：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时，只需删除旧的子节点

其它，特殊处理

第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保持不变，效率会更高

1.

序号： 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]

2.

序号：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，移动

讲解后续补充...