【Vue 开发实战】基础篇 # 7：理解虚拟DOM及key属性的作用

【Vue 开发实战】学习笔记。

事件操作 dom 会导致越来越乱

在这里插入图片描述

引入 state 层，事件操作数据，vue 底层映射到 dom 上。

在这里插入图片描述

数据变化，怎么尽可能的减少 dom 更新，就提出了虚拟 dom，它是 json 对象保留了 dom 树形结构信息

在这里插入图片描述

dom 比对，找出差异

在这里插入图片描述

在这里插入图片描述

映射到 dom，就是下面的结构

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
对应的dom

加了 key，就通过 key 去判断，移动即可，不用删除新建

在这里插入图片描述

有了key，B1、B2、B3 可以复用，B4 直接插入即可

在这里插入图片描述

相关阅读:
深度学习之wandb的基本使用
Nacos 配置中心
小度打头阵，百度大模型能否“赋能万物”？
Javascript中的对象(Object)类型
Vue组件之间传值
在Bat To Exe Converter，修改为当异常结束或终止时，程序重新启动执行
企业做商城怎么选品
LLM微调方法(Efficient-Tuning)六大主流方法：思路讲解&优缺点对比[P-tuning、Lora、Prefix tuing等]
开源数据集分享———猫脸码客
每日OJ题_其它背包问题①_力扣474. 一和零（二维费用01背包）

原文地址：https://blog.csdn.net/kaimo313/article/details/126700195