美文网首页
vue中key的作用

vue中key的作用

作者: 回不去的那些时光 | 来源:发表于2019-11-03 17:14 被阅读0次

我们先看一下vue官方文档中对key的介绍

  • key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

其实看完这段文档就大概知道key到底有什么用了,vue会基于key的变化移除不存在的元素。

下面看两个例子:

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
<transition>
  <span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时,span会随时被更新,因此会触发过渡。

key有什么作用呢?

  • 完整地触发组件的生命周期钩子
  • 触发过渡

相关文章

  • React diff算法

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

  • vue中key的作用

    我们先看一下vue官方文档中对key的介绍 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 no...

  • vue中key的作用

    vue中key的作用主要是为了高效的更新dom, 其原理是vue在patch过程中通过keykey更精准判断俩个...

  • vue中:key的作用

    因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚。 其实不只是v...

  • vue面试常见问题

    vue中动态绑定class的方式? watch和computed的区别 vue中key的作用 vue父传子 子传父...

  • Vue核心小知识点

    一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新...

  • Vue7.列表渲染

    1. :key的内部原理, vue中的key有什么作用? 代码实例: 2. 列表过滤 3. 列表排序 3. Vue...

  • [笔记] Vue中key的作用

    Vue官方文档解释 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VN...

  • Vue 中 key 值的作用

    当 Vue.js 使用 v-for 正在更新已渲染过的元素列表时,默认用“就地复用”策略。如果数据项的顺序被改变,...

  • 2020-03-10

    1. 写 React/Vue 项目时为什么要在组件中写 key,其作用是什么? key 的作用是为了在 diff ...

网友评论

      本文标题:vue中key的作用

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