详解如何理解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 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Python群发邮件实例代码
2014/01/03 Python
python单线程实现多个定时器示例
2014/03/30 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python树莓派红外反射传感器
2019/01/21 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
回门宴父母答谢词
2014/01/26 职场文书
演讲稿的写法
2014/05/19 职场文书
企业年检委托书范本
2014/10/14 职场文书
资产运营委托书范本
2014/10/16 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
bose降噪耳机音能消除人声吗
2022/04/19 数码科技