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

相关推荐
计算机学姐10 分钟前
基于微信小程序的调查问卷管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
黄尚圈圈4 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
一路向前的月光9 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   9 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Jiaberrr10 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
程序员大金13 小时前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
道爷我悟了14 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
无咎.lsy14 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
工业互联网专业14 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
计算机学姐15 小时前
基于SpringBoot+Vue的在线投票系统
java·vue.js·spring boot·后端·学习·intellij-idea·mybatis