Vue - 你知道Vue中key的工作原理吗

难度级别:中级及以上                                 提问概率:80% 


在Vue项目开发中,并不推荐使用索引做为key,以为key必须是唯一的,可以使用服务端下发的唯一ID值,也不推荐使用随机值做为key,因为如果每次渲染都监听到不一样的key,那么节点将无法复用,这与Vue节省性能的初衷是违背的。当Vue更新DOM时,它可以利用唯一的key来进行新旧节点的比较,基于这一特点,Vue在进行diff算法的时候,可以更加高效快捷的决定某些节点需要做移动、新增或是删除的操作,从而大大提升从虚拟DOM到真实DOM的更新效率。

那么Vue中key的工作原理是什么样的呢?首先虚拟DOM是一个大的数据对象,对象节点数据便是真实DOM的模拟实现,在真正更新DOM之前,需要对新旧虚拟节点进行比较;然后便会利用key值来比较两个新旧节点,Vue认为如果key相同,那么新旧节点就是同一个,不需要做出额外操作,从而达到复用节点的效果;而如果key值不同,那么Vue就需要进行移动、新增或是删除的操作。


相关推荐

  1. vue key 原理

    2024-04-10 00:52:02       13 阅读
  2. Vuekey作用和原理

    2024-04-10 00:52:02       33 阅读
  3. vue key原理和作用

    2024-04-10 00:52:02       7 阅读
  4. Vuekey到底有什

    2024-04-10 00:52:02       5 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-10 00:52:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-10 00:52:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-10 00:52:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-10 00:52:02       20 阅读

热门阅读

  1. 【后端】OFD学习笔记

    2024-04-10 00:52:02       12 阅读
  2. 吴军《格局》对我的3点帮助

    2024-04-10 00:52:02       13 阅读
  3. 深入了解Linux: dbus-daemon系统总线的作用与管理

    2024-04-10 00:52:02       11 阅读
  4. Leetcode 165. 比较版本号

    2024-04-10 00:52:02       13 阅读
  5. pandas中apply() 函数的应用

    2024-04-10 00:52:02       11 阅读
  6. css 响应式布局重学笔记

    2024-04-10 00:52:02       13 阅读
  7. Google HTML/CSS 风格指南

    2024-04-10 00:52:02       11 阅读
  8. vue3 开发中遇到的问题

    2024-04-10 00:52:02       14 阅读