详解如何理解vue的key属性


Posted in Javascript onApril 14, 2019

如果没有这个属性的时候vue应用 in-place patch(就地复用)策略。列表里的顺序发生改变的时候比如shuffle(列表打乱)的时候,vue为了提升性能,不会移动dom元素,只是更新相应元素的内容节点。

就地复用的弊端

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

如上引用自官网,这个模式就是上面的“就地复用”策略。那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢。如下测试代码:

<ul>
  <li v-for="item in items">
   <p>{{ item.title }}</p>
   <p>{{ item.des }}</p>
   <tweet-component></tweet-component>
  </li>
  </ul>
 <script>
  Vue.component("tweet-component", {
  template: `
   <div class="tweet">
   <div class="box">
    {{xixi}}
   </div>
   </div>
  `,
  data() {
   return {
   xixi: Math.random()
   };
  }
  });
  new Vue({
  el: "#app",
  data: {
   items: [
   { title: "nihao1", des: "xiexie1" },
   { title: "nihao2", des: "xiexie2" },
   { title: "nihao3", des: "xiexie3" }
   ]
  },
  methods: {
   shuffle() {
    // lodash的shuffle方法
   this.items = _.shuffle(this.items);
   }
  }
  });
 </script>

操作如下:

详解如何理解vue的key属性 

问题出现了:发生变化时,子组件 没有更新

ps: 测试临时 DOM 状态 (例如:表单输入值)可以参考这个链接 List Rendering and Vue's v-for Directive

key的作用

这个时候引入 key 就可以解决这个问题。 key 的作用是给予一个节点唯一的身份识别,有相同父元素的子元素必须有独特的 key 。这样它可以前后对比,算出哪些节点是要重复使用或者调整顺序。比如原先的 key 的顺序是 i1,i2,i3 ,之后变成了 i2,i1,i3 这个时候只要i3保持不变,把i2 insertBefore 到i1节点前就行了(以上是举例,vue具体怎么操作的需要去研究源码)。如果是利用数组的 index 来作为 key 则两次对比没有区别,就会出现上面动图里出现的子组件没有更新的情况。

可以通过查看下面两个动图查看dom节点的变化。第一个gif是没有使用 key ,第二个是使用了 key 。可以看到我点了按钮后,第一个只是更新 <p> 标签的内容节点。第二个是移动了某一项的 <li> 标签。

详解如何理解vue的key属性详解如何理解vue的key属性

ps: 另外可以通过chrome的dom断点功能查看子元素的插入删除。

DOM 更改断点

key的其他用途

key不是只能用在v-for上还可以用在其他元素上。如下代码

<div v-if="toggle">Hello</div>
<div v-else>Goodbye</div>

切换toggle时,它也是切换div。如果你想用上enter/leave animations时,即节点插入和删除的时候的动画时就要打破这个复用,如下:

<transition>
 <div v-if="toggle" key="1">Hello</div>
 <div v-else key="2">Goodbye</div>
</transition>

总结

如果你的列表不发生变化,或者你只是往列表最后一项添加元素则看似不必要增加 key 字段。但是你的项目中有很多列表的时候,你有的需要加 key ,有的不需要加。还不如所有的都加上呢避免别人理解困难(^._.^)ノ。

参考链接

https://vuejs.org/v2/guide/list.html#key

vuejs.org/v2/api/#key

https://forum.vuejs.org/t/simple-clarification-of-when-using-key-with-v-for-is-appropriate-and-why/28966/5

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

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
jQuery实现高级检索功能
May 28 jQuery
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 #Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 #Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 #Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
You might like
求PHP数组最大值,最小值的代码
2011/10/31 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
use jscript List Installed Software
2007/06/11 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
微信营销策划方案
2014/02/24 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
java中如何截取字符串最后一位
2022/07/07 Java/Android