vue的diff算法

作者: sun_hl | 来源:发表于2023-04-23 17:10 被阅读0次

sammary
Vue2.0的Diff算法
VueDiff算法的简单分析和一些个人思考
vue系列---vue-diff
Vue.js 3.0 对比 Vue 2
vue3是如何变快的
理解vue2.x之diff算法
第十七天
vue和react的diff算法比较
Vue中的diff算法

当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法。

patchVnode做了以下操作：

找到对应的真实dom，称为el
1、如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
2、如果oldVnode有子节点而VNode没有，则删除el子节点
3、如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
4、如果两者都有子节点，则执行updateChildren函数比较子节点

updateChildren主要做了以下操作：

1、设置新旧VNode的头尾指针
2、新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、3、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

sammary
vue-diff算法 react 性能优化 diff算法，局部更新DOMshouldComponentUpdat...
Vue2.0的Diff算法
原文：解析Vue2.0的Diff算法 Vue2.0加入了Virtual Dom，Vue的Diff位于patch.j...
VueDiff算法的简单分析和一些个人思考
Diff算法是Vue视图动态改变的核心算法之一本文包括对Diff算法的简单概括，和我闲的难受对Diff算法的一些...
vue系列---vue-diff
1.vue-diff 是什么？提到vue的diff算法就不得不提一个名词虚拟dom(Virtual DOM) ...
Vue.js 3.0 对比 Vue 2
1、Vue 3.0 性能提升主要是通过哪几方面体现的？一.编译阶段 diff 算法优化vue3 在 diff 算...
vue3是如何变快的
看了李南江老师的课程，将内容做一个记录 diff算法优化 vue2diff算法是对节点进行全量对比vue3.0在创...
理解vue2.x之diff算法
了解diff算法前，应该先了解虚拟DOM(VNode)，在vue中是先创建VNode，再通过diff算法看哪个节点...
第十七天
1.你怎么理解vue中的diff算法？ diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即dif...
vue和react的diff算法比较
相同点：Vue和react的diff算法，都是不进行跨层级比较，只做同级比较。不同点： 1.Vue进行diff时...
Vue中的diff算法
Vue中的diff算法概念：diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做...