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

就目前所了解的情况,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...

总结

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

(0)

相关推荐

  • Vue中 key keep-alive的实现原理

    vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 keep-aliv是Vue.js的一个内置组件.它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中. 它有两个生命周期: activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性,允许组件有条件地进行缓存. keep-a

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue2.0移除或更改的一些东西(移除index key)

    一.vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲染是怎么写的 <template> <div class="hello"> <ul> <li v-for="item in list">{{

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • Vue中使用create-keyframe-animation与动画钩子完成复杂动画

    本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家 如何实现这个动画?  效果分析 点`start`的时候,我们把整个动画拆分为两种效果(过渡和动画). 1. 中间cd消失,下方播放条显示,这是属于`过渡` 2. `过渡`开始的同时,cd同时移动.放大.缩小到左下方播放条 ,这属于`动画` 上面的效果是[过渡]加[动画]同时使用完成的 对于第一种[过渡],我们用vue中transition标签,加设置v-enter.v-leave

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

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

    如果没有这个属性的时候vue应用 in-place patch(就地复用)策略.列表里的顺序发生改变的时候比如shuffle(列表打乱)的时候,vue为了提升性能,不会移动dom元素,只是更新相应元素的内容节点. 就地复用的弊端 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出. 如上引用自官网,这个模式就是上面的"就地复用"策略.那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢.如下测试代码: <ul&g

  • 详解key在Vue列表渲染时究竟起到了什么作用

    Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点.而通常在我们使用v-for这个指令的时候,Vue会要求你给循环列表的每一项添加唯一的key,那么这个key在渲染列表时究竟起到了什么作用呢? 在解释这一点之前,你最好已经了解Vue的diff算法的具体原理是什么. Vue2更新真实DOM的操作主要是两种:创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点,这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点,所以在diff中逻辑都是为了减少新的创建

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet

随机推荐