vue中：key的作用

key是为每个vnode指定唯一的id，在同级vnode的Diff过程中，可以根据key快速的进行对比，来判断是否为相同节点，利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快,指定key后,可以保证渲染的准确性(尽可能的复用 DOM 元素。)

index 不要作为key使用
用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作
一般都用数据中的唯一值,比如ID这种,或者实在不行使用UUID库

vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
同一层级的一组节点，他们可以通过唯一的id进行区分。

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：
如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。
比如一下这个情况：

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

vue中：key的作用相关推荐

vue中key的作用及案例
1.key的作用假设现在有一个需求,在页面循环data中的数组. <div id="app"><ul><li v-for="(item, ...
vue中key的作用
1.v-if中用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不 ...
【Vue】中Key的作用
Vue中key的作用虚拟DOM 虚拟DOM 本质上是一个js对象 ,通过对象来表示真实的DOM结构. key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟DO ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
[vue] 你知道vue中key的原理吗？说说你对它的理解
[vue] 你知道vue中key的原理吗?说说你对它的理解 key的作用主要是为了高效的更新虚拟DOM; 如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低 ...
【Day08】请简述虚拟 DOM 中 Key 的作用和好处
请简述虚拟 DOM 中 Key 的作用和好处官网地址:https://cn.vuejs.org/v2/api/#key key 的作用 key 的特殊 attribute 主要用在 Vue 的虚拟 ...
vue 相同的id不合并_vue中key的作用
摘要本文结合源码说明了key的作用,给出了一个不写key的反例,并分析了原因. 内容 key的作用不写key会出的bug及原因分析 key的实践方案 key的作用在数据变化前后,vue会得到两个 ...
vue列表渲染中key的作用_vue中：key的作用
因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚. 其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的 ...
vue列表渲染中key的作用_列表渲染和Vue的v-for指令
Web渲染是Web开发中最常用的实战之一.动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息.在我们使用的每个Web应用程序中,都可以看到很多内容列表被用于Web应用程序当中. 在这篇文 ...

vue中：key的作用

vue中：key的作用相关推荐

最新文章

热门文章