详解vue中v-for的key唯一性

1. DOM Diff

要想真正了解 key 属性的存在意义，还真得从 DOM Diff 说起，并不需要深入了解 DOM Diff 的原理，而是仅仅需要知道 DOM Diff 的工作过程即可。

Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染。由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的，当 model 数据发生变化时，视图更新的方式就是重新 render DOM 元素。但是有时候我们只是改变了一个组件中的某一个 div 中的数据，如果采用原生 render 的方式去更新视图的话，那整个组件都要更新。岂不浪费时间？

我们日常生活中碰到这样的情况可不会全部更新，就像一个拼图拼好了，后来其中一小块需要更换，我们找到拿一块直接替换就好了，绝不会说再从头拼一次。Vue 和 React 的开发者也是这样想的，就去想方设法优化。

我们人眼一眼就可以看出改变前和改变后的不同之处，只更新不同之处就可以了。但计算机可一眼看不出来，它必须从头一块快地对比，直至找到不同之处进行更新。这个将改变前和改变后进行对比找不同的过程就是 DOM Diff，DOM Diff 中的 DOM 是虚拟 DOM，也就是 JavaScript 对象，一一比较找到不同之处后，就去局部更新真正的 DOM。

在比较的过程中， 虚拟 DOM 也会构成一棵虚拟 DOM 树，DOM Diff 的工作过程就是比较两棵虚拟 DOM 树上的对象节点，具体就是每一层和每一层的对应位置进行比较。正是因为计算机只会比较每一层对应位置的的两个虚拟 DOM 元素，如果这两棵树中改变后的树的某一层只是插入了一个节点，那树的结构是不变的，DOM Diff 在比较这一层的时候就会导致错位比较了，如下图所示：

因为这一层的虚拟 DOM 节点对于 Vue 和 React 来说除了 DOM 节点本身外是完全没有任何不同的，所以 DOM Diff 在比较的时候就只能按照对应位置一一比较了。

一一比较后，如果节点类型相同，那么就会复用该节点，单单局部更新该节点内不同的内容处。就像上述图中的，如果这是 ul 下的 li 的虚拟 DOM 节点的话，那一一比较后发现节点类型相同，就复用之前的节点，将节点里面的内容进行改变，也就是，将C更新成F，D更新成C，E更新成D，最后再插入E。

上述是插入节点的情况，带来的后果就是效率上的降低，但如果是删除节点的情况，那带来的后果可就不仅仅是效率了。

假如是点击一个按钮删除一个 li 元素，那新旧虚拟 DOM 树进行比较的时候，还是根据树中每一层的对应位置一一比较，比如删除后的 [1,2,3] 变成了 [1,3]，它就会将第一个 li 和第二个 li 相比较，发现元素类型没有变化，就会复用第一个 li，再递归对比 li 里面的，发现都没变化就继续复用。到了第二个 li 之间比较的时候，发现也都是 li 元素，那就会复用之前的li，单单将 2 变成了 3。

此时，如果复用的 li 中有子元素的话，子元素依赖的数据没有发生变化的话，就会继续复用之前的子组件，这样就会导致一个错位，如下图：

2. 为同一层的相同类型的元素添加 key 属性

在上述的 DOM Diff 算法中，比较的仅仅是两棵树同一层的对应位置，在不同层之前的元素之间是不需要比较的，而且，当 DOM Diff 的过程中发现，改变后的虚拟 DOM 和之前的虚拟 DOM 类型不同的时候，就会将之前的卸载，重新再添加改变后的元素节点。因此，上述的问题就出现在，两棵树中同一层的节点类型相同时，在该层添加或删除时会降低效率或者带来 bug。

这就是我们在 v-for 循环中生成同种类型的标签元素时的情况，如果不为该标签节点做点什么，就存在bug隐患，那么应该做什么呢？

答案就是为同一层的相同节点类型的节点添加一个唯一标识的 key 值，这样，在 DOM Diff 进行配对比较时，就会将 key 相同的两个虚拟 DOM 进行比较，而不是仅仅按照对应位置进行比较了。

这样一来就不会导致错位比较了，就大大提高了比较的效率，解决了 bug 隐患。

3. key 不能是 index 下标值

因为数组或对象的 index 下标值是唯一的，因此我们经常使用 index 作为 key 属性的值，有的人说这样是可以的，会带来性能上的优化什么的，但使用 index 下标值是会有大大的 bug　隐患的。

这些 bug 会在你　v-for 循环的数组或对象发生添加或删除或顺序改变时。

那么为什么不能使用 index 下标呢？

其实就是因为 index 下标使用了跟没使用了一样，因为在添加和删除时，某一个特定元素的 index 是会变的，比如 [1,2,3] 变成了 [1,3] 后，原来数据 3 对应的下标为2，删除后数据 3 的下标变成了 1，这在 DOM Diff 的时候，会根据 key 值相等的进行两两配对比较，这数据3对应的节点前后还是对应不上，因此，使用了 index 作为 key 跟没设置 key 是一样的效果。

这就是为什么不要使用 index 作为 key 的原因。

因此：key 属性值必须是独一无二的且不会改变的

以上就是详解vue中v-for的key唯一性的详细内容，更多关于vue中v-for的key唯一性的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用vue for时为什么要key【推荐】

    前言: 用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的一些理解对这个问题有了新的认识.所以记录下来,若各位看官看到文章里面有错误的地方请指正一下.谢谢各位大佬. 一.diff算法 修改渲染真实的dom会引起整个dom树的重绘和重排.diff算法可以帮助我们只对我们想要修改的部分进行更新而不会引起整个dom树的重绘和重排. 我们先根据dom生成virtual DOM,当virtual Dom

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • 浅谈VUE中演示v-for为什么要加key

    浅谈VUE中演示v-for为什么要加key

    说到这个问题想必要举个例子了 没有key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"> <

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中使用v-for时为什么不能用index作为key

    结论: 更新DOM的时候会出现性能问题 会发生一些状态bug React 中的 key 也是如此 如果已经了解 为什么要用key,可以通过目录直接跳到下一节. 为什么要用key? Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 同一

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

  • 详解vue中v-for的key唯一性

    详解vue中v-for的key唯一性

    1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 详解vue中v-for和v-if一起使用的替代方法template

    详解vue中v-for和v-if一起使用的替代方法template

    目录 版本 目标效果 说明 解决方法 核心代码片段 Car.vue vue中v-for和v-if一起使用的替代方法template 版本 vue 2.9.6element-ui: 2.15.6 目标效果 说明 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用 解决方法 选择性地渲染列表,例如根据某个特定属性(category )来决定不同展示渲染,使用计算属性computed 见https://www.jb51.net/article/24717

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

随机推荐