【Vue3 基础加餐篇】07.key 的作用源码解析_办公生活

创始人

2025-05-31 06:16:40

Vue 中增加 key ，是为了更精准的定位到元素，从而减少渲染。那具体这个更精准的定位是什么？以及为什么能减少渲染呢？我们在这一章节讲述。

虚拟 DOM

要聊这个之前，必须要有虚拟 DOM 的概念，这个不得不聊。

虚拟对象就是一种用来描述真实 DOM 的 js 对象。这样我们就可以通过对比 vnode（虚拟 DOM 树的节点），知道需要更新的 DOM 结构。

关于真实 DOM 与虚拟 DOM 的关系，你可以看做真实 DOM 为真实的建筑，而虚拟 DOM 为建筑的结构图，通过虚拟 DOM 可以构建真实 DOM。

根据新旧子树的 vnode 执行 patch 进行组件更新，而 key 是 patch 中对比 vnode 不同的一个环节。

const patch = (n1,n2,container,anchor = nul

游戏服务器是什么怎么租用游戏服务器是什么怎么租用我是艾西，作为一个常年与游戏行业保持着高频率的服务器供应商&...

Flink-转换算子基本转换算子 map(映射) filter（过滤&#...

2023年金三银四大厂高频Ja... Java 面试谈到 Java 面试，相信大家第一时间脑子里想到的词肯定是金三银四&#...

C语言手撕一个Hash表（Ha... 什么是Hash Table 散列表用的是数组支持按照下标随机访问数据的特性，所以散列表...

springMVC01- 文章目录今日目标一、SpringMVC简介1 SpringMVC概述问题导入1.1 SpringMV...

Electron开发的应用利用... 技术选型： 1、electron：21.3.3 2、electron-v...

【Elastic (ELK) ... 目录一、ES 基本概念介绍 1.1 ES 是什么 1.2 ES 主要功能 1.3 ES 相关术语 ...

指定wb用户在指定日期范围内的... 一、操作步骤只记录过程，不讲述原理 1.获取用户ID和cookie 用户ID在进入个...

sheng的学习笔记-IO多路... 基础概念IO分为几种：同步阻塞的BIO，同步非阻塞的NIO，...

接口自动化测试（Python+... 目录：导读（1）接口自动化测试的优缺点 (2)Pyth...

重构条件-Consolidat... 重构条件-Consolidate Conditional Expression合并条件式二 1.合并...

【论文阅读】BiSeNet V... 前言BiSeNet V2延续了v1版本的双边结构，分别处理空间细节信息、高层语义信息。...

二、马尔可夫决策过程与贝尔曼方... 这里写目录标题1 马尔可夫性质2 马尔可夫过程3 马尔可夫奖励过程（Markov re...

golang端口重用文章目录前言SO_REUSEADDR简介Python中的用法golang用法其他学习总结前言服...

Zabbix“专家坐诊”第18... 问题一 Q：Zabbix5.0版本，如图，请问这里怎么修改...

深度学习技巧应用5-神经网络中... 大家好，我是微学AI，今天给大家带来深度学习技巧应用5-神经网络中的模型...

Mongodb 常用基本语法与... 常用操作 1、 Help查看命令提示 db.help(); 2、切换/创建数据库 use t...

java中Long型数据大小比... 起因今天在做项目的时候，想构建一个树形结构，从数据库中查询出了所有数据...

【Linux】-- 进程概念基本概念进程(Process):是操作系统进行资源分配的最小单位。一个进程是一个程序的一次执行过程。...

2023-03-22干活小计： transformer: position-embedding: 残差：我也会了 ad...

verilog(基础知识) 摘要：主要写自己的学习内容，可能不完整概述对硬件描述，主要是对芯片设计进行验证人员对其进行验证...

MySQL函数 - 字符串函数... 文章目录1 字符串函数2 数值函数3 日期函数4 流程函数函数是指一段可以直接被另一段程序调用的程...

Word2010（详细布局解释... 目录一、界面介绍二、选项卡1、文件选项卡（保存、打开、新建、打印、保存并发送、选项&#...

ProTradex是链上衍生品... 目前，链上衍生品市场的总市值已经超过100亿美元，链上衍生品市场的产品类...

spring boot 集成 ... 要将 PostGIS 集成到 Spring Boot 应用程序中，需要按照以下步骤进行操作：1. 将...

【DDIM精读】公式推导加代码... 【DDIM精读】公式推导加代码分析。1.前言：ddim总览2.均值（μ\...

系统开发-McCabe复杂度（... 系统开发（上）-软件设计（三十二）https...

每日学术速递3.22 CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 ...

CCF-CSP题解第二题（J... 目录 201312-2：ISBN号码 201403-2：窗口 20140...