【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







目录
相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
319 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
300 137
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
429 1
|
5月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
269 0
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
807 0
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1037 4
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
867 77
|
8月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
480 17

热门文章

最新文章