key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速

Vue 的 diff 过程可以概括为:oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndexnewStartIndex、newEndIndex,它们会新节点和旧节点会进行两两对比,即一共有4种比较方式:newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex,如果以上 4 种比较都没匹配,如果设置了key,就会用 key 再进行比较,在比较的过程中,遍历会往中间靠,一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了,就会结束比较。

所以 Vue 中 key 的作用是:key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速

  • 更准确因为带 key 就不是就地复用了,在 sameNode 函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

  • 更快速:利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,源码如下:

function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}

Vue 中的 key 有什么作用?的更多相关文章

  1. react,vue中的key有什么作用?(key的内部原理)

    1.虚拟DOM中的key的作用: key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较. 2.比较规则 ...

  2. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  3. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  4. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

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

    怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...

  6. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  7. Vue中的key到底有什么用?

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  8. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

  9. 015——VUE中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

随机推荐

  1. Emacs单文件配置

    编辑 ~/.emacs 输入以下内容 ;; 编码 (set-language-info "UTF-8" 'coding-priority '(utf-8 gb18030 gbk g ...

  2. CSS常用属性(3)

    (9) list-style(列表样式) 类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roma ...

  3. 安卓逆向 IDA 动态调试 案例1

    adb forward tcp:23946 tcp:23946 adb devices adb shell su cd /data/local/tmp ./android_server adb she ...

  4. python编辑excel表格文件的简单方法练习

    一.创建一个Excel文件from openpyxl import Workbook #需要用到openpyxl模块来操作Excel文件.openpyxl需要先安装.#实例化对象wb = Workbo ...

  5. vue3.0中ref动态绑定

    // 自己使用 <div v-for="item in ['lisi','wanger']" :key="item"> <test :ref= ...

  6. K8S 部署es,搭建efk日志收集系统

    1.k8s部署es集群:https://www.jianshu.com/p/e490f7597539 2.k8s搭建efk日志收集系统:https://www.cnblogs.com/minseo/p ...

  7. 解决html2canvas.js和pdf.js导出页面问题

    最近在做项目时有这么一个需求,需要将当前html页面导出pdf到本地.由于之前是做过类似的功能的借助了两个插件分别是html2canvas.js和pdf.js,本以为是非常顺利就能完成的,实际在使用过 ...

  8. 【狂神说】SpringMVC笔记

    1.回顾MVC ssm:mybatis+Spring+SpringMVC MVC三层架构 ssm框架:研究官方文档,锻炼自学能力,锻炼项目能力 SpringMVC+Vue+SpringBoot+Spr ...

  9. 10.MyBatis-Plus的使用

    整合MyBatis-Plus 导入依赖 在解决逆向工程生成的代码报错时候已经给bianen-common导入了依赖 导入数据库的驱动 导入驱动和MySql的版本有关,我安装的MySql版本是5.7.3 ...

  10. python中的上下文管理器以及python内建模块contextlib的contextmanager方法

    上下文管理器 上下文管理器是实现了上下文管理协议的对象,其特有的语法是"with -as".主要用于保存和恢复各种全局状态,关闭文件等,并为try-except-finally提供 ...