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

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

说明

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



回顾 jquery

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

e805a4d482e2440f994b4f69e00262ce.png


再看 vue

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


f535894f39e54ddb8ede5bbf4c125e03.png


virtual dom

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

662de0dadf114661b21a4388edaa3017.png


virtual dom diff

dom 比对,找出差异


8a77db70097f4f50b7f91f93d00e1179.png

场景1:移动

88d02409b87f4650a193075c68265d2a.png


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

a5b2479e970d4c4db3183529076703ef.png


场景2:删除新建

72010cc41e2c4903870ab481a74eb517.png



场景3:删除新建

fa0c6cc9a6c24b539c944adc3234c8a6.png



场景4:更新删除新建(无key)


abdd80abab7c409f806613916274f09c.png

对应的dom

30d4688d5e0042948d5f72d8876dff7d.png


场景5:移动(有key)

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


9deab076fecd4e91966d681856ec60d6.png



场景6:插入(有key)

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

99f40183b8f74564b14a0a5e6b44efcf.png







目录
相关文章
|
8月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
449 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
5月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
573 1
|
8月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
768 17
|
10月前
|
JavaScript 算法
Vue 中如何手动更新虚拟 DOM?
Vue 中如何手动更新虚拟 DOM?
527 57
|
10月前
|
存储 JavaScript 算法
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
311 1
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
1418 76
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
529 4
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
1029 1
|
移动开发 JavaScript 前端开发
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
这篇文章深入探讨了虚拟DOM的概念、必要性以及在Vue中的实现方式,解释了虚拟DOM如何作为真实DOM的轻量级抽象,通过优化DOM操作提高性能,并实现跨平台渲染的能力。
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路