如何正确理解vue中的key详解


Posted in Javascript onNovember 02, 2019

就目前所了解的情况,key的作用有以下这些。

  • v-for遍历时,用id,uuid之类作为key,唯一标识节点加速虚拟DOM渲染
  • 响应式系统没有监听到的数据,用+new Date()生成的时间戳作为key,手动强制触发重新渲染

场景一大同小异司空见惯,场景二是下面这样的:

<div :key="rerender">
  <span>Hello Vue.js !</span>
  <complexComponent :propObj="propObj" :propArr="propArr" ></complexComponent>
</div>

refresh(){
  this.rerender = + new Date();
}

那么vue中key的相关知识点到底是怎样的呢?

  • 官方API知识点
  • 上面2个使用场景背后的原理是什么?
  • 除key外,还有其它强制更新DOM的方法吗?
  • 参考资料

官方API知识点

  • 在Vue.js中,key是6个特殊属性key, ref, is, slot, slot-scope, scope其中之一。
  • key的值可以是number,也可以是string。
  • key主要作用于Vue的virtual DOM算法,在diff new nodes list和old nodes list时,作为识别VNode的一个线索。
  • 如果不用key,Vue会用一种算法:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。
  • 如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。
  • 拥有同一个parent的children必须有unique keys。重复的key的导致render error。

最常用的用法一:v-for

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

最常用的用法二:强制替换element或者component

  • 触发组件的lifecycle
  • 触发transition
<transition>
 <span :key="text">{{ text }}</span>
</transition>

text发生变化时,<span>会被replaced,而不会patched,因此transition会被触发。

我的理解:

text变化时,span的key发生了变化,也就是说曾经拥有了旧key的span不再出现了,当拥有新值的text作为key时,拥有了新key的span出现了,那么旧key span会被移除,旧transition也会移除,新key span触发渲染,新transition触发。

上面2个使用场景背后的原理是什么?

结合官方API的知识点,现在再来回顾文章开头提出的场景。

场景一:v-for遍历时,用id,uuid之类作为key,唯一标识节点加速虚拟DOM渲染

答案:

  • 如果不用key,Vue会用一种算法:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。
  • 如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。

场景二:响应式系统没有监听到的数据,用+new Date()生成的时间戳作为key,手动强制触发重新渲染

<div :key="rerender">
  <span>Hello Vue.js !</span>
  <complexComponent :propObj="propObj" :propArr="propArr" ></complexComponent>
</div>

refresh(){
  this.rerender = + new Date();
}

答案:

  • 如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。
  • refresh方法调用后,包含了span和complexComponent的div的key发生了变化,也就是说曾经拥有了旧key的div不再出现了,当拥有新值的rerender作为key时,拥有了新key的div出现了,那么旧key div会被移除,旧span和complexComponent也会移除,新key div触发渲染,新span,带着父组件新propObj和propArr的新complexComponent渲染。

思考:

  • 为什么要叫propObj和propArr?
  • 带着父组件新propObj和propArr的新complexComponent渲染。 为什么要加粗?

由于Vue.js的obj和arr存在无法检测到数据变化的情况,obj是属性的新增和删除(原因是新增和删除都没有触发setter,watcher未告诉外界更新),arr则是数组内元素重新赋值或者修改length属性(原因是没有使用改变数组本身的方法,没有触发数组原型链拦截器,watcher未告诉外界更新)。

所以!通过赋予新key的方式,移除旧key div,渲染新key div,propObj和propArr在complexComponent组件内会重新触发一次生命周期,做一次重新渲染。此时父组件的propObj和propArr js变量其实已经获取到新值了,只是没有触发DOM也好,VNode也好的重新渲染。需要通过刷新key去force update,说到forceUpdate,可以通过$forceUpdate()去手动强制更新DOM。

除key外,还有其它强制更新DOM的方法吗?

场景:父组件修改传递给子组件的数据,数组数据的更新没有按照this.$set去更新。该怎么办?

this.productImages.forEach((product) => {
 if (product.productId in this.productsState) {
  product.status = this.productsState[product.productId];
 }
});

不使用this.$set去赋值数据的不能rerender的原因是什么?

在Vue.js中,对Array的变化侦测是通过拦截原型的方式实现的。也就通过对push,pop,shift,unshift,splice,sort,reverse,fill,copyWithin去改变数组自身内容的方法做拦截,从而响应。而product.status = this.productsState[product.productId];没有触发任何改变数组自身的被监听的方法,因此不会rerender。

  • 刷新组件的key
  • $forceUpdate方法

刷新组件的key

1.这个key加在什么地方比较好?

加在this.productImages的父元素上就好。

若不涉及数据传递,也可以直接加在需要更新的element上。

2.用什么做key值?

现在是粗暴的+new Date()时间戳做key值的。

也可以用双向绑定的值作为key值,保证新旧key值不同就行。

3.key的原理是什么?

vue.js的虚拟DOM算法,在更新vNode时,需要从旧vNode列表中查找与新vNode节点相同的vNode进行更新,如果这个过程设置了属性key,过程就会快很多。

其他具体见上文。

$forceUpdate方法

只能在父组件调用这个方法,手动通知vue实例重新渲染。

// $forceUpdate源码
Vue.prototype.$forceUpdate = function () {
 const vm: Component = this
 if (vm._watcher) {
  vm._watcher.update()
 }
}
// update源码
/**
 * Subscriber interface.
 * Will be called when a dependency changes.
 */
update () {
 /* istanbul ignore else */
 if (this.lazy) {
  this.dirty = true
 } else if (this.sync) {
  this.run()
 } else {
  queueWatcher(this)
 }
}

1.$forceUpdate可以更新的原理分析

product.status = this.productsState[product.productId];以后,其实此时dep已经发生变化了,但是Vue.js数组响应式的实现由于是拦截原型链方法的方式,没有检测到这个变化,所以不会自动rerender,没有触发update。因此我们通过$forceUpdate的方式,调用包含dep的watcher上的update方法,从而做到rerender。

2.可以在子组件监听事件,父组件发送事件然后只刷新子组件吗?

不可以。

因为dep是父组件的watcher和dep,并不是子组件,是父组件的this.productImages没有被检测到并实时更新,并不是子组件的问题。

参考资料

https://vuejs.org/v2/api/#key
https://vuejs.org/v2/api/#vm-...
https://vuejs.org/v2/guide/co...

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
精通JavaScript的this关键字
May 28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 #Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 #Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 #Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 #Javascript
vue实现点击追加选中样式效果
Nov 01 #Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 #Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 #Javascript
You might like
php学习笔记之面向对象编程
2012/12/29 PHP
php防止sql注入代码实例
2013/12/18 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python装饰器使用方法实例
2013/11/21 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python框架中flask知识点总结
2018/08/17 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
四川成都导游欢迎词
2014/01/18 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
剪彩仪式主持词
2014/03/19 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
初中政治教学反思
2016/02/23 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
redis protocol通信协议及使用详解
2022/07/15 Redis