浅谈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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
js中this对象用法分析
Jan 05 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
小学生班会演讲稿
2014/01/09 职场文书
项目合作协议书
2014/04/16 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
中学教代会开幕词
2016/03/04 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript