美文网首页
[笔记] Vue中key的作用

[笔记] Vue中key的作用

作者: 天使爱打盹 | 来源:发表于2019-07-18 10:59 被阅读0次
Vue官方文档解释

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

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

使用key的用处
  • 完整地触发组件的生命周期钩子
  • 触发过渡
key和效率
  • 设置key之后数组的diff效率不一定会提高(在复杂的列表渲染中快速准确的找到与newVnode相对应的oldVnode,提升diff效率)
  • 不使用key时,原地复用的效率是最高的(每一次循环新旧节点都是相对应的,只需要更新其内的文本内容就可以完成DOM更新)
参考

写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

相关文章

  • [笔记] Vue中key的作用

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

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

  • 2020-03-10

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

网友评论

      本文标题:[笔记] Vue中key的作用

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