简述diff算法

你如何理解vue中的diff算法1.diff算法是虚拟dom技术的必然产物,通过新旧虚拟dom做对比,将变化的地方更新在真是dom上,另外也需要diff高效的执行对比过程,从而降低时间的复杂度2.vue中的diff执行时刻是组件实例执行其更新函数时,他会对比上一次渲染结果oldvnode的新的渲染结果newvnode,此过程称为patc3.diff过程整体遵循深度优先,同层比较策略,俩个节点之间比

Mangoxin1

3023人浏览 · 2021-04-18 17:45:55

Mangoxin1 · 2021-04-18 17:45:55 发布

你如何理解vue中的diff算法

1.diff算法是虚拟dom技术的必然产物,通过新旧虚拟dom做对比,将变化的地方更新在真是dom上,另外也需要diff高效的执行对比过程,从而降低时间的复杂度

2.vue中的diff执行时刻是组件实例执行其更新函数时,他会对比上一次渲染结果oldvnode的新的渲染结果newvnode,此过程称为patc

3.diff过程整体遵循深度优先,同层比较策略,俩个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作,比较俩组节点是算法的重点,假设头尾节点可能相同会做四次对比尝试,如果没有相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下节点,借助key通常可以非常精确找到相同节点

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^