试题
考点

js语言和框架-vue.js-vue重排与重绘-diff

面5笔5

讲一下简单diff 算法的实现

前往“校招VIP”小程序,刷题更快
最新校招难题刷题,快来进刷题群吧
解答

diff 算法的目的是根据 key 复用 dom 节点,通过移动节点而不是创建新节点来减少 dom 操作。
对于每个新的 vnode,在旧的 vnode 中根据 key 查找一下,如果没查找到,那就新增 dom 节点,如果查找到了,那就可以复用。
复用的话要不要移动要判断下下标,如果下标在 lastIndex 之后,就不需要移动,因为本来就在后面,反之就需要移动。
最后,把旧的 vnode 中在新 vnode 中没有的节点从 dom 树中删除。

评论

星夜

2023-09-07 21:00:00

0 0

加载更多