【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







目录
相关文章
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1139 0
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
712 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
9月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
976 1
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
1124 1
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
209 1
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
613 1
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
2951 0

热门文章

最新文章