您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

即将到来的 Vue 3 “Vapor Mode”

时间:2023-11-10 14:26:39  来源:微信公众号  作者:前端充电宝

今年年初,尤雨溪在 2023 新年展望中提到了 Vue 3 “Vapor Mode”:

Vapor Mode 是一直在试验的另一种编译策略,其灵感来自于 Solid。给定相同的 Vue SFC,与当前基于虚拟 DOM 的输出相比,Vapor Mode 将其编译成性能更高、使用更少内存且需要更少运行时支持代码的 JAVAScript 输出。它仍处于早期阶段,这里有一些相关的要点:

  • Vapor Mode 适用于主要关注性能的用例。它是可选的,不会影响现有的代码库。
  • 开发者将能够将 Vapor 组件子树嵌入到任何现有的 Vue 3 应用中。在理想情况下,希望可以在组件级别实现粒度选择,这意味着可以在同一个应用中自由混合 Vapor 组件和非 Vapor 组件。
  • 仅使用 Vapor 组件构建应用允许从 bundle 中删除虚拟 DOM 运行时,从而显著减少 baseline 运行时大小。
  • 为了获得最佳性能,Vapor Mode 将仅支持 Vue 功能的一个子集。特别是,Vapor Mode 组件将仅支持 Composition API 和 <script setup> 。但是,这个受支持的子集在 Vapor 和非 Vapor 组件之间的工作方式完全相同。

 

下面就来详细看看,Vapor Mode 是什么,它是如何工作的,以及它的未来!

Vapor Mode 是什么?

Vapor 模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来增强应用的性能。

当在应用级别使用时,可以完全删除虚拟 DOM,从而减少应用的包大小。

✅ 使用 Vapor Mode 的好处如下:

  • 性能更佳
  • 使用更少的内存
  • 需要更少的运行时支持代码。

Solid.js 具有与 Vue 非常相似的响应式系统,它们都在其响应式系统中使用代理,并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。

Vapor Mode 如何工作?

给定相同的 .vue 单文件组件,Vapor Mode 能够将其编译为性能更高的 JavaScript 输出。

即将到来的 Vue 3 “Vapor Mode”

为了实现最佳性能,Vapor Mode 仅支持 Vue 功能的一个子集,包括新的 Composition API 和带有<script setup>.vue单文件组件(SFC),这些是 Vue 3 的新默认应用编写方式。

现状

目前,Vue 采用混合 VDOM/编译器方法。编译器获取 SFC 的模板,对其进行分析并将其提供给虚拟 DOM。

这种编译器通知的虚拟 DOM 方法使 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 工具表现得更好。

即将到来的 Vue 3 “Vapor Mode”

如何使用 Vapor Mode?

在组件层面

可以使用 .vapor 文件名后缀来启用它。

即将到来的 Vue 3 “Vapor Mode”

最终目标是在同一个应用中自由混合 Vapor 和非 Vapor 组件。

即将到来的 Vue 3 “Vapor Mode”

注意:Vapor Mode 最初将仅使用 Vapor 树集成到 vDOM 中,并在此基础上逐步提高它们之间的互操作性。

在应用层面

即将到来的 Vue 3 “Vapor Mode”

通过这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时,只包含极为轻量级的@vue/reactivity和 vapor mode 运行时辅助程序。与当前使用 vDOM 的 Vue 3 应用的基线大小(约 50KB)相比,这样编写应用的基线大小仅为约 6KB,实现了高达 88%的压缩比!

关键点

这是一项可选功能,不会影响现有的代码库。如果计划将 Vue 版本升级到包含 Vapor Mode 的版本,这不会引入任何与 Vapor Mode 相关的重大更改。

Vapor Mode 将能够与 vDOM 组件进行互操作。因此,如果希望使用像 Vuetify 这样的虚拟 DOM 库, Vapor Mode 仍然能够支持它。

Vapor Mode 发展阶段

Vapor Mode 仍在开发中,下面有一些相关消息:

第一阶段:核心功能的运行时

在这个阶段,引入了所有 Vapor 运行时相关的帮助生成代码的辅助程序。这个阶段已经基本完成。

❇️ 阶段目标:

  • 支持核心指令(v-on、v-if、v-for 等)和组件树。
  • 验证性能假设。
  • 与现有 SSR 输出的水合兼容性。

第二阶段:核心功能的编译器

这一阶段的主要重点是确保可以使用 Vue 模板或 JSX 并将其转换为运行时可以处理的内容。

❇️ 阶段目标:

  • 共享代码生成 IR(中间表示)
  • JSX AST / 模板 AST - IR - Vapor Mode 代码

那为什么需要中间表示呢?

由于没有虚拟 DOM,Vapor Mode 的编译过程无需手动创建渲染函数。然而,一些用户需要 JavaScript 的广泛灵活性。在这种情况下,可以将 JSX 编译为 Vapor 代码。

模板和 JSX 都经过转换为相同的中间表示,最终编译为 Vapor 代码。

即将到来的 Vue 3 “Vapor Mode”

第三阶段:集成

Vue 的目标是让 Vapor 能够无缝地融入现有的应用,而无需对当前的设置进行任何修改。可以在组件级别进行选择,以便能够逐步将其引入到应用的一部分中,或者特别是在性能关键的区域中使用。这样,可以根据需要灵活地利用 Vapor,并在需要时将其引入到现有的应用程序中。

❇️ 阶段目标:

  • 对独立 Vapor 应用的工具支持
  • 在现有应用中运行 Vapor 组件
  • 在 Vapor 中运行 vDOM 组件

第四阶段:功能对等

在首次发布时,Vapor Mode 将仅提供基本的核心功能,而诸如<Transition />、<KeepAlive />、<Teleport />、Suspense 等辅助功能将在 Vue 团队完成前述目标后进行实现。

小结

  • Vapor Mode 是 Vue.js 正在开发的一种新的面向性能的编译策略;
  • 它将使用相同的模板(假设使用的是 Composition API 和<script setup>,并产生更高性能的输出);
  • 它将逐步采用,开发者可以选择为单个组件或整个应用启用 Vapor 模式。
  • 最终目标是实现在同一应用中自由混合使用 Vapor 和非 Vapor 组件,而不会引发任何问题。不过,Vapor Mode 将首先以仅包含 Vapor 树的 vDOM 为基础,并在此基础上逐步提高它们之间的互操作性。


Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  Search: Vue  点击:(11)  评论:(0)  加入收藏
SpringBoot3+Vue3 开发高并发秒杀抢购系统
开发高并发秒杀抢购系统:使用SpringBoot3+Vue3的实践之旅随着互联网技术的发展,电商行业对秒杀抢购系统的需求越来越高。为了满足这种高并发、高流量的场景,我们决定使用Spring...【详细内容】
2024-01-14  Search: Vue  点击:(90)  评论:(0)  加入收藏
React与Vue性能对比:两大前端框架的性能
React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。React的加载速度:初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM...【详细内容】
2024-01-05  Search: Vue  点击:(106)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  Search: Vue  点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  Search: Vue  点击:(36)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  Search: Vue  点击:(72)  评论:(0)  加入收藏
Vue中虚拟Dom技术,你学会了吗?
在Vue中,虚拟DOM(Virtual DOM)是一项关键的技术,它是一种用JavaScript对象模拟真实DOM结构的机制。虚拟DOM的引入旨在提高DOM操作的效率,特别是在频繁的数据变化时。1. 为什么需...【详细内容】
2023-12-26  Search: Vue  点击:(65)  评论:(0)  加入收藏
七个常用的 Vue 3 UI 组件
介绍:由于我在工作的公司中角色和职责的变化,作为后端开发人员的我在去年年底选择了 Vue.js。当我深入研究时,我发现 Vue.js 非常有趣。它不像 Angular 那样有很高的学习曲线,而...【详细内容】
2023-12-20  Search: Vue  点击:(78)  评论:(0)  加入收藏
Vue3 学习笔记,如何使用 Watch 监听数据变化
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下如何使用 watch 监听组件中的数据变化,以及 computed 和 watch 的区别。什么是 watch,以及如何使用?watch 是...【详细内容】
2023-12-14  Search: Vue  点击:(163)  评论:(0)  加入收藏
Vue3 学习笔记,如何理解 Computed 计算属性
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景,以及 computed 和 Method 事件的区别和应用场景。什么是 co...【详细内容】
2023-12-11  Search: Vue  点击:(199)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(10)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(67)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(36)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条