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中的元素

相关推荐
军军君011 小时前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
踩着两条虫2 小时前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程
xiaotao1312 小时前
Vite 与 Webpack 开发/打包时环境变量对比
前端·vue.js·webpack
前端摸鱼匠3 小时前
Vue 3 的defineProps编译器宏:详解<script setup>中defineProps的使用
前端·javascript·vue.js·前端框架·ecmascript
天外天-亮3 小时前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind
挖稀泥的工人3 小时前
能够插入 DOM 的输入框
前端·javascript·vue.js
没有故事、有酒3 小时前
Vue2中el-table修改表头高度和行高
javascript·vue.js·elementui
把csdn当日记本的菜鸡3 小时前
Vue3 响应式 API 简单学习
javascript·vue.js·学习
小李子呢02114 小时前
前端八股5---组件通信
前端·javascript·vue.js
kyriewen114 小时前
每日知识点:this 指向之谜——是谁在 call 我?
前端·javascript·vue.js·前端框架·ecmascript·jquery·html5