Vue.js 2023 年最新路線圖

作者：CUGGZ 2023-02-13 09:01:21

最新的 Vue 2.7 是最終的 2.x 版本。這意味著 Vue 2 將不再計(jì)劃發(fā)布新功能。但是，直到今年年底，它仍將獲得對(duì)錯(cuò)誤修復(fù)和安全修復(fù)的必要支持。

Vue Amsterdam 2023 于 2 月 8 日至 10 日舉行（Vue Amsterdam 是世界上最大的 Vue.js 會(huì)議），這是 Vue.js 作者尤雨溪三年以來首次參加面對(duì)面 Vue 活動(dòng)。在會(huì)議中，尤雨溪透露了 Vue 的一些令人興奮的新功能，并提供了 2023 路線圖的更新。

概述：

Vue 2 將于 2023 年 12 月 31 日結(jié)束支持，達(dá)到生命周期結(jié)束（EOL）；
Reactivity Transform 將從 v3.4 中的 Vue 核心中移除；
響應(yīng)式 props 解構(gòu)；
Suspense 將于 Q2 確定；
更多 SSR 改進(jìn)，包括懶水合、v-ssr-only；
Vapor mode：一種可選擇的以性能為導(dǎo)向的編譯模式。

Vue 2 EOL

為了彌補(bǔ)個(gè)和主要版本之間的差距，Vue 2.7 添加了內(nèi)置的 Composition API 支持以及 <script setup> 功能。這也是為了減少升級(jí)到 Vue 3 的工作量。

2023 年 12 月 31 日之后，Vue 團(tuán)隊(duì)將不再維護(hù) Vue 2。官方文檔[1]中有相關(guān)的詳細(xì)說明，其中包括如果不打算遷移到 Vue 3 可以怎么做。其中一個(gè)選項(xiàng)是查看 HeroDevs[2]，因?yàn)樗鼈儗⒅С?Vue 2。

放棄 Reactivity Transform

當(dāng)使用 ref 使某些對(duì)象具有響應(yīng)式時(shí)，可以為其分配一個(gè)新值并通過 .value 訪問它：

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

本質(zhì)上，Reactivity Transform[3] 允許我們在編寫響應(yīng)式代碼時(shí)省略 ??.value??。默認(rèn)情況下，它是禁用的，因?yàn)樗匀皇?RFC 中的實(shí)驗(yàn)性功能。

Vue 團(tuán)隊(duì)已經(jīng)決定在未來幾個(gè)月內(nèi)逐步淘汰它。原因之一是 DX 改進(jìn)非常有限。沒有 ??.value??，響應(yīng)式變量和非響應(yīng)式變量之間的區(qū)別就丟失了，這不可避免地引入了另一種心智負(fù)擔(dān)。

如果你現(xiàn)有的代碼庫中使用了 Reactivity Transfom，將從 v3.3 開始收到棄用警告。到 v3.4 時(shí)，它將完全從 Vue 核心包中移除。但是，仍然可以從 Vue macros[4] 中使用它。

注：目前 Vue.js v3.3 已經(jīng)處于 v3.3.0-alpha.4 階段，距離正式發(fā)布又近了一步。

響應(yīng)式 props 解構(gòu)

盡管 Reactive Transform 沒有通過 RFC，但它還是產(chǎn)生了一些有用的功能，這就是響應(yīng)式 props 解構(gòu)。

目前，當(dāng)我們像這樣使用 defineProps 解構(gòu) props 時(shí)，響應(yīng)式會(huì)丟失：

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

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

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

使用響應(yīng)式 props 解構(gòu)，我們可以忘記這些并以最常見的 JS 方式簡單地解構(gòu)它，甚至可以像這樣分配一個(gè)默認(rèn)值：

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

注：目前，響應(yīng)式 props 解構(gòu)是 Reactivity Transform RFC 的一部分，但正如尤雨溪在會(huì)議中提到的那樣，它可能會(huì)被拆分成一個(gè)單獨(dú)的功能，并且很可能會(huì)作為一個(gè)新功能包含在未來的 Vue 版本中。

SSR 改進(jìn)

在與 Nuxt 團(tuán)隊(duì)的協(xié)調(diào)下，Vue 團(tuán)隊(duì)將在第二季度專注于 SSR 的改進(jìn)。這包括完成目前仍處于實(shí)驗(yàn)?zāi)Ｊ降?Suspense 功能。

簡單來說，Suspense 是一個(gè)內(nèi)置組件，它提供了一種在等待嵌套異步組件解析時(shí)顯示頂層加載/錯(cuò)誤狀態(tài)的解決方案。沒有它，我們必須分別處理每個(gè)異步組件的狀態(tài)。

除此之外，可以期待看到引入懶水合作用。這個(gè)想法是讓我們定義自定義策略，以了解我們希望異步組件樹如何水合，例如，僅在某些組件滾動(dòng)到視圖中時(shí)才水合它們。

v-ssr-only 是 Vue 團(tuán)隊(duì)正在探索的另一個(gè)新特性。這將允許我們將特定模板聲明為僅服務(wù)端渲染。當(dāng)對(duì)一個(gè)模板進(jìn)行動(dòng)態(tài)綁定時(shí)，這會(huì)很有用，因?yàn)樵撃０逯械臄?shù)據(jù)是從數(shù)據(jù)庫中提取的，但在客戶端它永遠(yuǎn)不會(huì)改變。在這種情況下，當(dāng)客戶端構(gòu)建完成時(shí)，編譯可以以不同的方式完成，忽略所有動(dòng)態(tài)綁定，這樣它就不必在水合作用期間做任何工作。

Vapor Mode

在此之前，關(guān)于 Vue 團(tuán)隊(duì)正在探索的這個(gè)看似令人興奮的新功能的信息并不多。今年年初，尤雨溪在他的 2023 新年文章中簡要介紹了 Vapor Mode：

受 solid.js 的啟發(fā)，Vapor Mode 提供了另外一種編譯策略。它將 Vue SFC 編譯成 JavaScript 輸出，與當(dāng)前基于虛擬 DOM 的輸出相比，該輸出具有更高的性能、使用更少的內(nèi)存并且需要更少的運(yùn)行時(shí)支持代碼。

聽起來很酷，所有這些都可以在不對(duì)現(xiàn)有代碼庫進(jìn)行太多更改的情況下完成。

在 Vue Amsterdam 的演講中，有一些關(guān)于如何選擇加入 Vapor Mode 的新細(xì)節(jié)。有兩種方法可以做到這一點(diǎn)：

（1）在組件級(jí)別通過包含 .vapor? 文件名后綴，例如 Counter.vapor.vue：

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

<template>
  <Counter>
</template>

（2）在應(yīng)用級(jí)別，通過刪除 VDOM interop：

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

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

使用 Vapor Mode，組件可以被編譯成一個(gè)函數(shù)調(diào)用，我們可以不再擔(dān)心擁有太多組件和創(chuàng)建這些組件實(shí)例所帶來的內(nèi)存開銷。

一開始，Vapor Mode 旨在僅支持 Vue API 的一個(gè)子集（<script setup> 和 Composition API）以獲得最佳性能。因此，計(jì)劃是使 Vapor Mode 與任何其他現(xiàn)有的非 Vapor Mode 完全兼容。實(shí)現(xiàn)自由混合使用（在非 Vapor 組件中使用 Vapor 組件，反之亦然）也是 Vue 團(tuán)隊(duì)的最終目標(biāo)。我們可能會(huì)在第三季度至第四季度看到這一特性。