你知道vue中key的作用和工作原理吗说说你对它的理解。

key 的作用是为了高效的更新虚拟 DOM,其原理是 vue在 path中调用 updateChildren 中会遍历所以的节点,如果没有设置 key 的时候,会认为比较的两个节点为同一个节点,会导致频繁的更新不同的元素,导致了频繁的 DOM *** 作如果设置了 key,在updateChildren过程中会很准备的判断节点是不是相同节点,从而避免频繁更新不同元素,使得 path 更加高效,减少DOM *** 作,提高性能

第步创建静态HTML5页面vmodelhtml并引入vueminjs文件

第二步body元素内插入div并div引入input输入框label标签

第三步调用初始化Vuejs并给输入框赋值

第四步预览该静态页面页面显示默认显示值

第五步减少输入框字符发现面内容跟着减少

第六步添加输入框字符面内容随增加展示数据双向绑定

开始之前，我们先还原两个实际工作场景

那么这背后的逻辑是什么， 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/patchjs

这里判断是否为同一个 key ，首先判断的是 key 值是否相等如果没有设置 key ，那么 key 为 undefined ，这时候 undefined 是恒等于 undefined

updateChildren 方法中会对新旧 vnode 进行 diff ，然后将比对出的结果用来更新真实的 DOM

vuekey可以是任意数据类型

vue$set:设置的属性对象 可以是Object或者数组

设置的key值可以 string或者number类型

设置的值可以是任意值。

以上就是关于你知道vue中key的作用和工作原理吗说说你对它的理解。全部的内容，包括:你知道vue中key的作用和工作原理吗说说你对它的理解。、vue v-model怎么获取data1: [key:'']里的某个数据、vue中key的原理吗说说你对它的理解等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！