Vue的虚拟dom和diff算法

一、是什么

diff算法是一种通过同层级的树节点进行比较的高效算法

diff算法是为了进行精细化比对,最小量更新的

特点

1.同级比较:比较只在同层级进行

2.首尾指针法:从两边向组件比较
比较方式/策略:深度优先,同层比较

根据真实Dom创建虚拟Dom:

v-if显示上树,或者v-for的数组push了一个新元素上树


diff算法的实现流程图

二、案例分析

oldStart先与newStart比较,不相同

oldStart先与newEnd比较,相同,将真实Dom的a节点移动到新节点所在的位置

因为oldStart于newEnd比对成功了,oldStart向右移一位,newEnd向左移一位

oldStart(b节点)先与newStart(b节点)比较,相同,将真实Dom的b节点移动到新节点所在的位置

因为oldStart于newStart比对成功了,oldStart向右移一位,newStart向右移一位

oldStart(c节点)先与newStart(c节点)比较,相同,将真实Dom的b节点移动到新节点所在的位置

因为oldStart于newStart比对成功了,oldStart向右移一位,newStart向右移一位,此时oldStart的位置大于oldEnd的位置,比较结束

但是新节点还剩下一个d节点,就创建d节点,放在新节点所在的位置,如果比较结束后新节点的个数比较少的话,就需要删除真实dom中的元素

相关推荐
祈澈菇凉3 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
yanglamei19625 小时前
基于Python+Django+Vue的旅游景区推荐系统系统设计与实现源代码+数据库+使用说明
vue.js·python·django
流烟默6 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
菲力蒲LY6 小时前
vue 手写分页
前端·javascript·vue.js
zpjing~.~7 小时前
vue 父组件和子组件中v-model和props的使用和区别
前端·javascript·vue.js
bin91538 小时前
DeepSeek 助力 Vue 开发:打造丝滑的 键盘快捷键(Keyboard Shortcuts)
前端·javascript·vue.js·计算机外设·ecmascript·deepseek
格式化小拓8 小时前
在vue2中操作数组,如何保证其视图的响应式
前端·javascript·vue.js
陈小于8 小时前
vue从入门到精通(十一):条件渲染
前端·javascript·vue.js
fangcaojushi10 小时前
解决webpack5.54打包图片及图标的问题
前端·vue.js
前端菜鸟日常11 小时前
vue2和vue3的按需引入的详细对比通俗易懂
javascript·vue.js·ecmascript