Vue.js 2023 年最新路线图

Vue Amsterdam 2023 于 2 月 8 日至 10 日举行（Vue Amsterdam 是世界上最大的 Vue.js 会议），这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vue 活动。在会议中，尤雨溪透露了 Vue 的一些令人兴奋的新功能，并提供了 2023 路线图的更新。

概述：

• Vue 2 将于 2023 年 12 月 31 日结束支持，达到生命周期结束（EOL）；
• Reactivity Transform 将从 v3.4 中的 Vue 核心中移除；
• 响应式 props 解构；
• Suspense 将于 Q2 确定；
• 更多 SSR 改进，包括懒水合、v-ssr-only；
• Vapor mode：一种可选择的以性能为导向的编译模式。

Vue 2 EOL

为了弥补个和主要版本之间的差距，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。

放弃 Reactivity Transform

当使用 ref 使某些对象具有响应式时，可以为其分配一个新值并通过 .value 访问它：

const count = ref(0)
console.log(count.value)   // 0

本质上，Reactivity Transform^[3] 允许我们在编写响应式代码时省略 .value。默认情况下，它是禁用的，因为它仍然是 RFC 中的实验性功能。

Vue 团队已经决定在未来几个月内逐步淘汰它。原因之一是 DX 改进非常有限。没有 .value，响应式变量和非响应式变量之间的区别就丢失了，这不可避免地引入了另一种心智负担。

如果你现有的代码库中使用了 Reactivity Transfom，将从 v3.3 开始收到弃用警告。到 v3.4 时，它将完全从 Vue 核心包中移除。但是，仍然可以从 Vue macros^[4] 中使用它。

注：目前 Vue.js v3.3 已经处于 v3.3.0-alpha.4 阶段，距离正式发布又近了一步。

响应式 props 解构

尽管 Reactive Transform 没有通过 RFC，但它还是产生了一些有用的功能，这就是响应式 props 解构。

目前，当我们像这样使用 defineProps 解构 props 时，响应式会丢失：

const { count } = defineProps<{ count: number }>();

因此，要么需要使用 props.x，要么使用 toRefs：

const props = defineProps<{ count: number }>(); 
const { count } = toRefs(props);

使用响应式 props 解构，我们可以忘记这些并以最常见的 JS 方式简单地解构它，甚至可以像这样分配一个默认值：

const { count = 1 } = defineProps<{ count: number }>();

注： 目前，响应式 props 解构是 Reactivity Transform RFC 的一部分，但正如尤雨溪在会议中提到的那样，它可能会被拆分成一个单独的功能，并且很可能会作为一个新功能包含在未来的 Vue 版本中。

SSR 改进

在与 Nuxt 团队的协调下，Vue 团队将在第二季度专注于 SSR 的改进。这包括完成目前仍处于实验模式的 Suspense 功能。

简单来说，Suspense 是一个内置组件，它提供了一种在等待嵌套异步组件解析时显示顶层加载/错误状态的解决方案。没有它，我们必须分别处理每个异步组件的状态。

除此之外，可以期待看到引入懒水合作用。这个想法是让我们定义自定义策略，以了解我们希望异步组件树如何水合，例如，仅在某些组件滚动到视图中时才水合它们。

v-ssr-only 是 Vue 团队正在探索的另一个新特性。这将允许我们将特定模板声明为仅服务端渲染。当对一个模板进行动态绑定时，这会很有用，因为该模板中的数据是从数据库中提取的，但在客户端它永远不会改变。在这种情况下，当客户端构建完成时，编译可以以不同的方式完成，忽略所有动态绑定，这样它就不必在水合作用期间做任何工作。

Vapor Mode

在此之前，关于 Vue 团队正在探索的这个看似令人兴奋的新功能的信息并不多。今年年初，尤雨溪在他的 2023 新年文章中简要介绍了 Vapor Mode：

受 solid.js 的启发，Vapor Mode 提供了另外一种编译策略。它将 Vue SFC 编译成 JavaScript 输出，与当前基于虚拟 DOM 的输出相比，该输出具有更高的性能、使用更少的内存并且需要更少的运行时支持代码。

听起来很酷，所有这些都可以在不对现有代码库进行太多更改的情况下完成。

在 Vue Amsterdam 的演讲中，有一些关于如何选择加入 Vapor Mode 的新细节。有两种方法可以做到这一点：

（1）在组件级别通过包含 .vapor 文件名后缀，例如 Counter.vapor.vue：

<script setup>
import Counter from './Counter.vapor.vue' 
</script>

<template>
  <Counter>
</template>

（2）在应用级别，通过删除 VDOM interop：

import { createApp } from 'vue/vapor'
import App from './App.vapor.vue'

createApp(App).mount('#app')

使用 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/

往期推荐：