【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贪吃蛇游戏一键生成
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
901 0
|
8月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
771 17
|
10月前
|
JavaScript 算法
Vue 中如何手动更新虚拟 DOM?
Vue 中如何手动更新虚拟 DOM?
528 57
|
10月前
|
存储 JavaScript 算法
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
312 1
|
10月前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
JavaScript 算法 前端开发
深入剖析Vue中v-for的使用及index作为key的弊端
深入剖析Vue中v-for的使用及index作为key的弊端
509 2
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
607 0

热门文章

最新文章