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. MySQL-知识点补充

    1.SQL注入问题 简单实现利用数据库实现注册登录功能: import pymysql conn = pymysql.connect( host='127.0.0.1', port=3306, use ...

  2. Idea导入本地Mavenue项目

    转https://www.cnblogs.com/kaola8023/p/14069519.html 一.导入Maven项目的问题 1. 安装后运行idea会直接打开如下页面 , 我们点击 Open  ...

  3. python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制

    js的几种循环方式 v-for可以循环的变量 可以循环的: 数组.数组带索引 对象.对象带key.value 字符串 字符串带索引 数字.数字带索引 <!DOCTYPE html> < ...

  4. NoSQL(简介、历史)

    NoSQL 为什么使用NoSQL 1.单机MySQL的网站 APP----->DAL------>MySQL 90年代:一个基本的网站访问量一般不会很大,单个数据库完全足够. 那个时候,更 ...

  5. vue axios请求中断的处理

    https://blog.csdn.net/qiaoqiaohong/article/details/121014296

  6. axios实现跨域的问题 vue实现跨域

    第一次写博客,主要是记录自己的一些新的,不好的地方忘各位多多指点,请不要吐槽: 按踩坑顺序叙述.本人对http了解太少,所以坑踩得较多. 1.开始进行跨域时,知道vue2.0官方推荐axios进行aj ...

  7. 精华推荐 |【算法数据结构专题】「延时队列算法」史上非常详细分析和介绍如何通过时间轮(TimingWheel)实现延时队列的原理指南

    时间轮的介绍 时间轮(TimeWheel)是一种实现延迟功能(定时器)的精妙的高级算法,其算法应用范围非常广泛,在Java开发过程中常用的Dubbo.Netty.Akka.Quartz.ZooKeep ...

  8. No.1.9

    项目样式补充 精灵图(场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图) (优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度) 精灵图的使用步骤:1.创建一个盒子,设置盒 ...

  9. Vulnhub:recon靶机

    kali:192.168.111.111 靶机:192.168.111.188 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...

  10. CF1303F 题解

    题意 传送门 有一个 \(n\times m\) 的矩阵,初始全是 \(0\).我们定义 \(a_{i,j}\) 表示矩阵中第 \(i\) 行第 \(j\) 列的元素. 如果两个格子有相邻边并且格子中 ...