微信二维码
微博二维码
qq号二维码

重学Vue3 - 模板语法 - (8)

王伟平 2022.08.02 72人浏览
重学Vue3 - 模板语法 - (8)

插入F的案例

需求

假设存在列表,对应其中的元素为a, b, c, d, e

现在想在b后边插入一个值为f的li节点

此时vue就会根据是否存在对应的唯一的key而做出不同的操作

在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表,因为在整个列表中其实存在很多元素是相同的,可能只是位置发生了改变,重新删除并创建整个元素看起来是没有必要的

vue在没有key的时候会依次进行遍历

  1. a节点和b节点是没有任何的改变的,所以vue会对其进行复用

  2. 比对到c节点的时候,因为没有key,所以vue并不知道c节点仅仅只是移动了位置

    所以此时vue会将c节点的内容修改为f

  3. d和e节点执行和c节点类似的操作

  4. 新建一个节点,将节点的值设置为e

当存在key的时候

  1. 从头开始进行遍历,复用可以复用的元素

  • a和b是一致的,vue会复用a节点和b节点

  • c和f因为key不一致,所以就会break跳出循环

  1. 从后向前进行遍历,复用可以复用的元素

  1. 如果旧节点遍历完毕,但是依然有新的节点,那么就新增节点

  1. 如果新的节点遍历完毕,但是依然有旧的节点,那么就移除旧节点

  1. 如果中间还有很多未知的或者乱序的节点,vue会使用最长递增子序列等方法,尽可能的移动节点以找到最长的可以复用的子序列进行复用

所以Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作。在进行插入或者重置顺序的时候,为元素添加唯一的key可以让diff算法更加的高效

此时vue就会根据是否存在对应的唯一的key而做出不同的操作

在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表,因为在整个列表中其实存在很多元素是相同的,可能只是位置发生了改变,重新删除并创建整个元素看起来是没有必要的

转自稀土掘金



分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 天津插画培训,0基础学插画到底要不要报班?
  • 2022.08.12