昨天，4 月 16 日，vue 3 正式進入 beta 階段。同日，尤大參加了 State of Vue 的線上活動，以下是他上傳到 google docs 上的 slides ：

State of Vue Apr 16 2020

可以 FQ 的同學可以直接看。如果不方便的話，可以繼續往下看一下：

vue 3 核心的進度情況

進入 Beta 階段意味著什麼？

• All planned RFCs merged & implemented
• Focus is now on stability and library integrations

目前，所有被列入計劃的 RFCs 已經實現了，接下來 Vue 團隊的重點是讓 Vue 3 變得更加穩定，以及讓 vue 相關的第三方庫支援 vue 3。

3.0 對比 2.x 有哪些重要變更？

• Performance
• Tree-shaking support
• Composition API
• Fragment, Teleport, Suspense
• Better TypeScript support
• Custom Renderer API

主要體現在 效能、Tree-shaking support 、Composition API 、 Fragment 、TypeScript支援度 和 自定義 Render 上。

效能

• Rewritten virtual dom implementation
• Compiler-informed fast paths
• More efficient component initialization
• 1.3~2x better update performance*
• 2~3x faster SSR*

效能上，主要是 重寫了Vdom , compiler-informed fast paths（編譯模板的優化？）， 以及實現了更加高效的元件初始化。

Tree-shaking support

• Most optional features (e.g. v-model, ) are now tree-shakable
• Bare-bone HelloWorld size: 13.5kb
• 11.75kb with only Composition API support
• All runtime features included: 22.5kb
• More features but still lighter than Vue 2

這部分的優化主要是減少了 vue 的打包體積。很多時候，我們的應用並不是需要 vue 提供的所有功能的，在 vue 2 我們沒有很好的辦法把這些不想要的功能排除掉，但是 3.0 我們就做成了按需引入。舉例來說，內建元件像 keep-alive、transition，指令的配合的執行時比如 v-model、v-for 等都可以按需引入 。這樣就可以讓純淨的 vue 的體積變得更小了。

Composition API

• Usable alongside existing Options API
• Flexible logic composition and reuse
• Reactivity module can be used as a standalone library

Composition API 是和 React Hooks 類似的東西，他們的主要作用是提高了程式碼邏輯的可複用性，從而實現了與模板無關性。另外，把 Reactivity 模組獨立開來，意味著 vue 3 的響應式模組可以和其他框架組合。之前昊神就發過一篇文章 40行程式碼把Vue3的響應式整合進React做狀態管理 有興趣的可以去看一下。

Fragments

• No longer limited to a single root node in templates
• Manual render functions can simply return Arrays
• “Just works”

不再限制 tmeplate 裡面只有一個根節點了，render 函式也可以返回陣列了，有點類似實現了 React.Fragments 的功能 。

<Teleport>

• Previously known as
• More details to be shared by @Linusborg

<Suspense>

• Wait on nested async dependencies in a nested tree
• Works with async setup()
• Works with Async Components

Better TypeScript Support

• Codebase written in TS w/ auto-generated type definitions
• API is the same in JS and TS
• In fact, code will also be largely the same
• TSX support
• Class component is still supported (vue-class-component@next is currently in alpha)

對 TS 及 TSX的支援度更加友好了。類元件還會繼續支援，但是需要引入 vue-class-component@next，該模組目前還處在 alpha 階段。

Custom Renderer API

• NativeScript Vue integration underway by @rigor789
• Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)

這是個振奮人心的訊息，意味著以後我們可以通過 vue ，實現用 dom 程式設計的方式來進行 webgl 程式設計 。感興趣可以看這裡：Getting started vugel

vue 3 生態的進度情況

文件和遷移指引進度

• New Docs under heavy work by @NataliaTepluhina, @sdras, @bencodezen & @phanan
• @sdras starting to work on Migration Guide
• @sodatea has started working on CodeMods

vue-router

• vue-router@next is currently in alpha, thanks to work by @posva

Vuex

• vuex@next (same API but with Vue 3 compat) currently in alpha, thanks to work by @KiaKing
• Team is experimenting with Vuex API simplification for the next iteration

vue-cli

• Experimental Support via vue-cli-plugin-vue-next by @sodatea
• (wip) CodeMods support for upgrading Vue 2 applications

vue-test-utils

• test-utils@next being worked on by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

DevTools

• Early prototype already working by @Akryum, full integration will be worked on as we reach beta

IDE Support (Vetur)

• @znck currently experimenting with Type checking for templates
• @octref will be working on Vetur integration for Vue 3 in May

Nuxt

• Nuxt team is working on Vue 3 integration and already has working prototype.

What About 2.x?

• There will be one last minor release (2.7)
• Backporting compatible improvements from 3.0
• Deprecation warnings for features removed in 3.0
• LTS for 18 months

可見，vue 2 並沒有過時， 還會有小更新，並且還會維護 18 個月。

總結

雖然 vue 3 已經進入 beta 階段，但是距離能應用到生產環境還是有很長的路要走，最起碼，在 2020 年 繼續使用 vue 2 也不會過時，最主要的原因是 vue 3 生態還沒有完善。就像 python3 出來那麼久了，現在還有很多人使用 python2 一樣，因為還有很多 python 的庫不相容 python3 的。