Vue.js 2023 年最新路线图

,Vue Amsterdam 2023 于 2 月 8 日至 10 日举行（Vue Amsterdam 是世界上最大的 Vue.js 会议），这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vue 活动。在会议中，尤雨溪透露了 Vue 的一些令人兴奋的新功能，并提供了 2023 路线图的更新。,为了弥补个和主要版本之间的差距，Vue 2.7 添加了内置的 Composition API 支持以及 <script setup> 功能。这也是为了减少升级到 Vue 3 的工作量。,最新的 Vue 2.7 是最终的 2.x 版本。这意味着 Vue 2 将不再计划发布新功能。但是，直到今年年底，它仍将获得对错误修复和安全修复的必要支持。,2023 年 12 月 31 日之后，Vue 团队将不再维护 Vue 2。官方文档[1]中有相关的详细说明，其中包括如果不打算迁移到 Vue 3 可以怎么做。其中一个选项是查看 HeroDevs[2]，因为它们将支持 Vue 2。,当使用 ref 使某些对象具有响应式时，可以为其分配一个新值并通过 .value 访问它：,本质上，Reactivity Transform[3] 允许我们在编写响应式代码时省略 ​​.value​​。默认情况下，它是禁用的，因为它仍然是 RFC 中的实验性功能。,Vue 团队已经决定在未来几个月内逐步淘汰它。原因之一是 DX 改进非常有限。没有 ​​.value​​，响应式变量和非响应式变量之间的区别就丢失了，这不可避免地引入了另一种心智负担。,如果你现有的代码库中使用了 Reactivity Transfom，将从 v3.3 开始收到弃用警告。到 v3.4 时，它将完全从 Vue 核心包中移除。但是，仍然可以从 Vue macros[4] 中使用它。,,尽管 Reactive Transform 没有通过 RFC，但它还是产生了一些有用的功能，这就是响应式 props 解构。,目前，当我们像这样使用 defineProps 解构 props 时，响应式会丢失：,因此，要么需要使用 props.x，要么使用 toRefs：,使用响应式 props 解构，我们可以忘记这些并以最常见的 JS 方式简单地解构它，甚至可以像这样分配一个默认值：,在与 Nuxt 团队的协调下，Vue 团队将在第二季度专注于 SSR 的改进。这包括完成目前仍处于实验模式的 Suspense 功能。,简单来说，Suspense 是一个内置组件，它提供了一种在等待嵌套异步组件解析时显示顶层加载/错误状态的解决方案。没有它，我们必须分别处理每个异步组件的状态。,除此之外，可以期待看到引入懒水合作用。这个想法是让我们定义自定义策略，以了解我们希望异步组件树如何水合，例如，仅在某些组件滚动到视图中时才水合它们。,v-ssr-only 是 Vue 团队正在探索的另一个新特性。这将允许我们将特定模板声明为仅服务端渲染。当对一个模板进行动态绑定时，这会很有用，因为该模板中的数据是从数据库中提取的，但在客户端它永远不会改变。在这种情况下，当客户端构建完成时，编译可以以不同的方式完成，忽略所有动态绑定，这样它就不必在水合作用期间做任何工作。,在此之前，关于 Vue 团队正在探索的这个看似令人兴奋的新功能的信息并不多。今年年初，尤雨溪在他的 2023 新年文章中简要介绍了 Vapor Mode：,听起来很酷，所有这些都可以在不对现有代码库进行太多更改的情况下完成。,在 Vue Amsterdam 的演讲中，有一些关于如何选择加入 Vapor Mode 的新细节。有两种方法可以做到这一点：,（1）在组件级别通过包含 .vapor​ 文件名后缀，例如 Counter.vapor.vue：,（2）在应用级别，通过删除 VDOM interop：,使用 Vapor Mode，组件可以被编译成一个函数调用，我们可以不再担心拥有太多组件和创建这些组件实例所带来的内存开销。,一开始，Vapor Mode 旨在仅支持 Vue API 的一个子集（<script setup> 和 Composition API）以获得最佳性能。因此，计划是使 Vapor Mode 与任何其他现有的非 Vapor Mode 完全兼容。实现自由混合使用（在非 Vapor 组件中使用 Vapor 组件，反之亦然）也是 Vue 团队的最终目标。我们可能会在第三季度至第四季度看到这一特性。,[1]官方文档: https://v2.vuejs.org/lts/。,[2]HeroDevs: https://www.herodevs.com/support/vue。,[3]Reactivity Transform: https://vuejs.org/guide/extras/reactivity-transform.html。,[4]Vue macros: https://vue-macros.sxzz.moe/。