vue中key的原理吗?说说你对它的理解
发布网友
发布时间：2023-03-21 10:48
共1个回答
热心网友
时间：2023-10-09 10:05
那么这背后的逻辑是什么， key 的作用又是什么？
一句话来讲
当我们在使用 v-for 时，需要给单元加上 key
用 +new Date() 生成的时间戳作为 key ，手动强制触发重新渲染
举个例子：
创建一个实例，2秒后往 items 数组插入数据
在不使用 key 的情况， vue 会进行这样的操作：
[图片上传中...(image-135c49-1631019652027-0)]
分析下整体流程：
一共发生了3次更新，1次插入操作
在使用 key 的情况： vue 会进行这样的操作：
一共发生了0次更新，1次插入操作
通过上面两个小例子，可见设置 key 能够大大减少对页面的 DOM 操作，提高了 diff 效率
其实不然，文档中也明确表示
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出
建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升
源码位置：core/vdom/patch.js
这里判断是否为同一个 key ，首先判断的是 key 值是否相等如果没有设置 key ，那么 key 为 undefined ，这时候 undefined 是恒等于 undefined
updateChildren 方法中会对新旧 vnode 进行 diff ，然后将比对出的结果用来更新真实的 DOM
