Vue 中的 key 有什么作用?
key 是为 Vue 中 vnode
的唯一标记,通过这个 key,我们的 diff
操作可以更准确、更快速
。
Vue 的 diff 过程可以概括为
:oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex
和 newStartIndex、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 有什么作用?的更多相关文章
- react,vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中的key的作用: key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较. 2.比较规则 ...
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- 写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么
怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...
- vue中动态样式不起作用? scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- Vue中的key到底有什么用?
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...
- vue 中$index $key 已经移除了
https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...
- 015——VUE中使用key唯一令牌解决表单值混乱问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...
随机推荐
- Emacs单文件配置
编辑 ~/.emacs 输入以下内容 ;; 编码 (set-language-info "UTF-8" 'coding-priority '(utf-8 gb18030 gbk g ...
- CSS常用属性(3)
(9) list-style(列表样式) 类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roma ...
- 安卓逆向 IDA 动态调试 案例1
adb forward tcp:23946 tcp:23946 adb devices adb shell su cd /data/local/tmp ./android_server adb she ...
- python编辑excel表格文件的简单方法练习
一.创建一个Excel文件from openpyxl import Workbook #需要用到openpyxl模块来操作Excel文件.openpyxl需要先安装.#实例化对象wb = Workbo ...
- vue3.0中ref动态绑定
// 自己使用 <div v-for="item in ['lisi','wanger']" :key="item"> <test :ref= ...
- K8S 部署es,搭建efk日志收集系统
1.k8s部署es集群:https://www.jianshu.com/p/e490f7597539 2.k8s搭建efk日志收集系统:https://www.cnblogs.com/minseo/p ...
- 解决html2canvas.js和pdf.js导出页面问题
最近在做项目时有这么一个需求,需要将当前html页面导出pdf到本地.由于之前是做过类似的功能的借助了两个插件分别是html2canvas.js和pdf.js,本以为是非常顺利就能完成的,实际在使用过 ...
- 【狂神说】SpringMVC笔记
1.回顾MVC ssm:mybatis+Spring+SpringMVC MVC三层架构 ssm框架:研究官方文档,锻炼自学能力,锻炼项目能力 SpringMVC+Vue+SpringBoot+Spr ...
- 10.MyBatis-Plus的使用
整合MyBatis-Plus 导入依赖 在解决逆向工程生成的代码报错时候已经给bianen-common导入了依赖 导入数据库的驱动 导入驱动和MySql的版本有关,我安装的MySql版本是5.7.3 ...
- python中的上下文管理器以及python内建模块contextlib的contextmanager方法
上下文管理器 上下文管理器是实现了上下文管理协议的对象,其特有的语法是"with -as".主要用于保存和恢复各种全局状态,关闭文件等,并为try-except-finally提供 ...