浅谈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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
浅谈vue.use()方法从源码到使用
May 12 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
使用C++为node.js写扩展模块
2015/04/22 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python解析html开发库pyquery使用方法
2014/02/07 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python多线程扫描端口代码示例
2018/02/09 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
仓库规划计划书
2014/04/28 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL