vue diff算法

2023-02-12  本文已影响0人  sunflower_07

vue diff算法:

为了避免不必要的渲染 按需更新 虚拟DOM会采用diff算法进行虚拟DOM节点比较 比较节点差异 从而确定需要更新的节点 再进行渲染 Vue采用的是深度优先 同层比较的策略

新节点与旧节点的比较主要是围绕三件事达到渲染目的
创建新节点
删除废节点
更新已有节点
1.先同层级根元素比较 如果跟元素变化 那么不考虑复用 整个dom树删除重建
先同层级根元素比较 如果根元素不变 对比出属性的变化更新 并考虑往下递归复用;

2.对比同级兄弟元素时 , 默认按照下标进行对比复用
对比同级兄弟元素时 如果指定了 key 就会按照相同 key 的元素来进行对比;
diff的算法如何比较新旧虚拟dom
1.同层级根元素先比较
(1)如果根元素变了 删除重建doM数
(2)如果根元素没变 对比属性 并考虑往下递归复用=
2.兄弟元素比较
(1)默认按照下标 进行对比复用
(2)如果设置了key 就会按照相同key元素进行复用

上一篇下一篇

猜你喜欢

热点阅读