vue3采用的是什么diff算法
-
Vue 3 采用的是虚拟DOM diff 算法。
在理解 Vue 3 采用的 diff 算法之前，我们先来了解一下虚拟 DOM（Virtual DOM）的概念。虚拟 DOM 是一种将真实 DOM 抽象成 JavaScript 对象的方式。通过对虚拟 DOM 的操作，最终会将变化的部分更新到真实 DOM 上，从而提高页面的渲染效率。
Vue 3 中的 diff 算法与 Vue 2 中的 diff 算法有一些不同。在 Vue 2 中，diff 算法采用的是双指针的方式进行比较，即首先在同层级的节点中找到相同类型的节点，再进行属性和子节点的比较，从而确定哪些节点需要进行更新。
而在 Vue 3 中，采用的是一种更高效的 diff 算法——静态标记（Static Marking）和静态提升（Static Hoisting）。这种算法能够在编译阶段静态地分析模板中哪些节点是静态的（不会变化的），然后将这些静态节点提升到渲染函数的外部，以减少 diff 和渲染的成本。
在 Vue 3 中，静态标记的方式是通过给静态节点添加一个特殊的标记来识别它们。这样在每次更新的时候，Vue 只需要对比动态节点，而无需再对比静态节点，从而优化了更新速度。
另外值得一提的是，在 Vue 3 中也引入了 Fragment（片段）的概念，它可以用来在组件中返回多个根级别的元素。这样可以更加灵活地组织组件的结构，同时也能减少不必要的节点层级。
总的来说，Vue 3 采用的 diff 算法相比于 Vue 2 更加高效，通过静态标记和静态提升的方式，减少了不必要的比较和渲染操作，从而提升了页面的渲染性能。
2年前 0条评论 -
Vue 3采用的是基于双指针的优化的 "静态" diff算法。
-
双指针
Vue 3中的diff算法使用了双指针的技巧来进行虚拟DOM的比较。双指针分别指向旧虚拟DOM树和新虚拟DOM树的节点，通过对比节点的标签、属性和文本内容来判断是否需要更新。 -
静态优化
Vue 3的diff算法还引入了"静态"优化的概念。在编译阶段，Vue会对静态节点进行标记，这些静态节点的结构和属性不会发生变化。在更新阶段，Vue会跳过对比静态节点的过程，从而提高diff算法的性能。 -
Patch Flag
Vue 3还引入了Patch Flag的概念。Patch Flag是一个二进制标志位，每个标志位表示一种DOM操作，比如插入节点、删除节点、替换节点等。通过Patch Flag，Vue 3可以精确地知道哪些节点需要更新，从而减少不必要的比较操作，提高diff算法的效率。 -
Hoist Static
Hoist Static是Vue 3中的一个优化技术，它可以将静态节点提升到父级组件的渲染函数之外，从而减少每次渲染时对静态节点的比较操作。通过Hoist Static，Vue 3可以进一步优化diff算法的性能。 -
Fragments
Vue 3还引入了Fragments的概念，它可以将多个相邻的同级节点包裹在一个容器中，从而减少虚拟DOM树的层级结构，提高diff算法的效率。
总结：
Vue 3采用了基于双指针的优化的 "静态" diff算法。通过双指针对比节点的标签、属性和文本内容来判断是否需要更新，并通过静态优化、Patch Flag、Hoist Static和Fragments等技术来提高diff算法的性能。这些优化措施可以减少不必要的比较操作、降低虚拟DOM树的层级结构、跳过对比静态节点以及精确地知道哪些节点需要更新，从而提高Vue 3的渲染性能。2年前 0条评论 -
-
Vue 3 采用了基于 Proxy 的响应式系统和 Virtual DOM 的 diff 算法。
-
基于 Proxy 的响应式系统：
Vue 3 中采用了 Proxy 对象来实现响应式系统，与 Vue 2 中的 Object.defineProperty 相比，Proxy 具有更强大的功能和更好的性能。Proxy 可以监听对象的任何属性的变化，包括新增和删除属性。而 Object.defineProperty 只能监听已经存在的属性，并且需要遍历对象的每个属性进行设置。使用 Proxy 可以更方便地监听对象的变化，并进行相应的更新。 -
Virtual DOM 的 diff 算法：
Virtual DOM 是 Vue 中用于描述真实 DOM 结构的轻量级 JavaScript 对象。为了提高性能，Vue 3 采用了一种名为 PatchFlag 的标记策略来进行优化。PatchFlag 是一个二进制标志位，用于表示 Virtual DOM 节点的类型和更新操作。在 diff 算法中，Vue 3 通过比较新旧节点的 PatchFlag，直接确定是否需要进行精确的比较。如果 PatchFlag 不匹配，可以直接跳过对其子节点的比较和更新，从而提高了性能。 -
diff 算法的操作流程：
（1）比较新旧节点的类型和关键属性，例如标签名、key 等。如果类型或关键属性不同，则直接替换整个节点。
（2）如果类型和关键属性相同，则比较子节点。
（3）对子节点进行递归比较。采用双端指针的方式，分别从新旧节点的首尾开始比较。如果遇到不匹配的节点，则根据新旧节点列表的长度差异和具体的情况进行插入、移动或删除操作。
（4）如果新旧节点列表长度不同，则根据具体的差异进行新增或删除操作。
（5）对于有状态组件，比较组件实例的状态并更新。
通过以上的 diff 算法操作流程，Vue 3 可以高效地比较 Virtual DOM，只对有变化的部分进行更新，从而提高了页面的渲染性能。
2年前 0条评论 -
