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


Posted in Javascript onJanuary 16, 2020

说到这个问题想必要举个例子了

没有key

<div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">添加</button>
  </div>
  <ul>
   <li v-for="(item, i) in list">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '吕不韦' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意这里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

当选中吕不为时,添加楠楠后选中的确是李斯,并不是我们想要的结果,我们想要的是当添加楠楠后,一种选中的是吕不为

浅谈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" :key="item.id">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '吕不韦' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意这里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

同样当选中吕不为时,添加楠楠后依旧选中的是吕不为。

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

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

可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

查过相关文档,图例说明很清晰。

vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设
首先讲一下diff算法的处理方法,对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:

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

当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况:

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

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

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

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

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

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
深入理解node.js之path模块
May 03 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JavaScript实现简单日历效果
Sep 11 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
Vue引入Stylus知识点总结
Jan 16 #Javascript
js实现提交前对列表数据的增删改查
Jan 16 #Javascript
react实现移动端下拉菜单的示例代码
Jan 16 #Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 #Javascript
JS实现简单的表格增删
Jan 16 #Javascript
JS实现基本的网页计算器功能示例
Jan 16 #Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 #Javascript
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP在Web开发领域的优势
2006/10/09 PHP
php实现telnet功能示例
2014/04/08 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
在模板页面的js使用办法
2010/04/01 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
劳动竞赛口号
2014/06/16 职场文书
踏青活动策划方案
2014/08/19 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python