美文网首页
v-for中为什么要用key

v-for中为什么要用key

作者: 玲儿珑 | 来源:发表于2020-05-20 18:46 被阅读0次

必须用key,且不能是index和random
diff算法中通过tag和key来判断是不是sameNode(相同节点)
减少污染次数,提升渲染性能

https://www.jianshu.com/p/229fcc64767d

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"

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

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制,key 并不仅与 v-for 特别关联。后面我们将在指南中看到,它还具有其它用途。

不要使用对象或数组之类的非基本类型值作为 v-forkey。请用字符串或数值类型的值。

更多 key attribute 的细节用法请移步至 key 的 API 文档

相关文章

  • v-for中为什么要用key

    必须用key,且不能是index和randomdiff算法中通过tag和key来判断是不是sameNode(相同节...

  • v-for中为什么要用key?

    使用vue的同学大家都知道,在使用v-for指令的时候,都需要添加一个key属性,并且是唯一的key。我们都会想到...

  • v-for 的四种使用方法

    v-for中key的使用注意项v-for在循环时,key属性只能使用number获取stringkey在使用时只能...

  • Vue CLI——自定义插件、自定义指令

    一、key v-for绑定key值,为什么不建议使用index作为key值?如果只是展示列表数据,key值可以是索...

  • 框架知识 - Vue

    6 道面试题 v-show & v-if 的区别 为啥 v-for 中要用key 描述Vue组件生命周期(有无父子...

  • 前端经典问题

    VUE 1、v-show和v-if的区别2、为何v-for中要用key3、描述Vue组件生命周期(有父子组件的情况...

  • React diff算法

    react/vue中,key的作用是什么? 为什么遍历时,key最好不要用index? 虚拟DOM中key的作用:...

  • v-for 中的 key

    vue官方文档不推荐使用 index 作为 v-for 的 key,一直不明白为什么,开发中也没有碰到相关问题,今...

  • v-for中的key

    大家要知道,不仅只是vue中,react中在执行列表渲染时也会要求给每个组件添加key这个属性如果想知道key的作...

  • 【面试题解析】从 Vue 源码分析 key 的作用

    最近看了面试题中有一个这样的题,v-for 为什么要绑定 key? Vue 中 key 很多人都弄不清楚有什么作用...

网友评论

      本文标题:v-for中为什么要用key

      本文链接:https://www.haomeiwen.com/subject/tkonohtx.html