vue3为何向Inferno与ivi靠拢
Date:
在《diff算法:react与vuediff算法对比,snabbdom.js 》一文中,提到过
vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅
从《浅谈 React/Vue/Inferno 在 DOM Diff 算法上的异同》,简单阐述了 React、Vue、Inferno 的算法梗概
React 假定最大递增子序列从0开始,在末尾节点移动到首位的场景中会恶化;
Vue 利用双向遍历排序的方法,有可能不是最优解,但与最优解十分逼近;
Inferno 利用最大递增子序列的算法达到了移动DOM次数最少的目标;
三种算法对于倒序这种场景都降级为理论上的最少N-1次。
Vue3.x借鉴了 ivi算法和 inferno算法。
虽然 Vue.js 并没有直接使用 ivi 或 Inferno 框架的代码,但是它确实从这些项目的设计理念中汲取了一些灵感。
比如Vue 3.x 借鉴 ivi 和 inferno 算法的思想,在渲染器的 diff 算法上进行了重要优化。这些优化措施包括 VNode 类型确定、位运算判断以及动态规划思想的运用等,它们共同作用于 Vue 3.x 的渲染流程中,使得 Vue 3.x 在性能上相比 Vue 2.x 有了显著提升。
Vue 3.x 从 Inferno 中获得的一些灵感包括:
虚拟 DOM (vDOM) 的高效实现:Inferno 使用高效的 vDOM 实现,减少内存使用并提高渲染速度。Vue 3.x 同样优化了它的 vDOM 实现,采用了更细粒度的 patching 策略,并且通过 Tree Shake 友好的 API 设计使得打包体积更小。
函数式组件:Inferno 鼓励使用函数式组件而非类组件。Vue 3.x 支持函数式组件,并且在 Vue 3 中函数式组件可以更好地与 Composition API 结合使用。
Vue 3.x 可能从 ivi 的某些想法中得到了启示,比如:
直接 DOM 操作:尽管 Vue 3.x 仍然使用 vDOM,但它对 vDOM 的处理更加智能,例如在更新过程中尽可能地复用现有的 DOM 节点而不是重新创建它们。
可预测性:ivi 强调可预测性和调试性,Vue 3.x 在其开发者工具中也加强了这些方面,使得开发者更容易理解和调试应用的状态变化。
ivi算法和inferno算法的特点
ivi算法:ivi算法通过在创建VNode时就确定其类型,以及在mount/patch的过程中采用位运算来判断一个VNode的类型,从而优化了虚拟DOM的创建和更新过程
inferno算法:inferno算法同样关注于优化虚拟DOM的创建和更新,通过位运算和核心的Diff算法,提高了Vue3.x的性能
那么Inferno 与ivix 到底是何方神圣呢?
Inferno
Inferno类似于React的库,最大的卖点却是其卓越的算法。
与Preact相似,Inferno也使用与React相同的API构建,但是Inferno的主要目的是变得快速、轻便。
尽管Inferno基于React,但与React 和Preact相比,它包含一些重要的功能/差异:
与React相比,Inferno的体积非常小。压缩后约为8KB,比Preact稍大。
Inferno不单独包含DOM。Inferno的DOM内置于其核心中。
Inferno-compact可以帮助您使用各种React库。
Inferno在功能组件上使用生命周期方法。
Inferno和典型的虚拟DOM库不同,比如React、Mithril、Cycle和Om等,Inferno采用了智能技术来区分静态和动态的内容,这让Inferno仅仅“区分”渲染那些有动态值的内容。
Ivi
Ivi 是一个轻量级且高效的前端UI框架,https://github.com/localvoid/ivi
他的设计哲学是简洁、灵活和可扩展,使得开发者能够在项目中轻松集成各种自定义组件和第三方库。
其实这个个人还是不太感冒这个
转载本站文章《vue3为何向Inferno与ivi靠拢》,
请注明出处:https://www.zhoulujun.cn/html/webfront/engineer/Architecture/9258.html