浅谈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 Jcrop插件实现图片选取功能
Nov 23 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
JavaScript严格模式详解
Jan 16 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
iView框架问题整理小结
Oct 16 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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 方便水印和缩略图的图形类
2009/05/21 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
初识PHP中的Swoole
2016/04/05 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
jQuery实现电梯导航模块
2020/12/22 jQuery
Python字符串中查找子串小技巧
2015/04/10 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
利用python进行文件操作
2020/12/04 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
C#笔试题
2015/07/14 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
自主实习接收函
2014/01/13 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android