校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > vue重排与重绘-diff
题目

Vue2 diff流程

解答

新老节点不同

1.创建新节点 以当前旧节点为参考 插入到DOM
2.删除旧节点

新老节点相同

1.如果两个节点引用一致 直接返回
2.内部都是文本节点 新旧不同 更新文本节点的内容
3.只有新的有子节点 移除旧节点的内容 批量添加
4.只有老的有子节点 批量移除
5.两者都有子节点且不同 执行updateChildren更新子节点

updateChildren

根据我们日常操作节点的习惯、移动 添加 和 删除 ,Vue2对比两个子节点采用双端比较法,通过对比老节点在新节点的位置尽可能的复用老节点。

1.头头对比 尾尾对比
2.交叉对比 头尾对比
3.新的节点有剩余 进行添加操作
4.老的节点有剩余 进行移除

C 0条回复 评论

帖子还没人回复快来抢沙发