详解如何理解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的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
解决layui的input独占一行的问题
Sep 10 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与javascript的两种交互方式
2006/10/09 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
ajax异步请求详解
2017/01/06 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
react路由配置方式详解
2017/08/07 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
商务助理求职信范文
2014/04/20 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
初中家长意见
2015/06/03 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
导游词之河北邯郸
2019/09/12 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
git stash(储藏)的用法总结
2022/06/25 Servers
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android