早上刷微博看到 evanyou(尤雨溪) 宣佈 Vue 3.0 正式進入 Beta，順藤摸瓜找到了 Vue 團隊於 4 月 16 號釋出的官宣視訊：Global Vue Meetup featuring Evan You & Thorsten Lünborg，感興趣的小夥伴可以去看看。
Vue 3.0 即將為開發者們帶來的是一個更快、更小、更易維護以及更方便使用的 Vue 版本，與此同時，Vue 並沒有拋棄其“漸進式”的概念，你仍然可以通過 script 標籤使用 Vue，以及 2.x 版本的程式碼也會一如既往健康地繼續工作著。
Beta 版本的釋出說明官方團隊先前所規劃的新特性已經全部完成開發，接下來的工作將會致力於框架的整體穩定性和周邊庫的新版本適配。
Composition API
在所有 Vue 的更新中，最引起我注意的就是那些“拆出來的 API”，它們並沒有涉及什麼新的概念，本質上就是將 Vue 的一些核心功能（諸如建立元件、觀察響應式狀態）暴露給了開發者，可以用來代替元件經典的物件式寫法（Options API）。
在 Vue 2.x 版本中，元件的組織方式是基於物件的，即 object-based Options API，隨著 Vue 的使用越來越廣泛，這種框架模式也遇到了本質上的瓶頸。當開發者的元件越來越大，稍有不慎就會變的很醜 ，其中涉及的邏輯處理也會變得很臃腫，這個時候開發者是無法將這些程式碼按照業務功能分類組織的，因為 Options API 在設計之初就認為此類業務程式碼應當被合理的分置在元件的各項 Options（data、computed、props、methods、生命週期鉤子）中，所以元件越大，程式碼的可讀性就越差。其次，在大型的專案中重用某些邏輯變得有些困難，目前的解決方案比如 mixins，並不能很好得解決這些問題。
於是，Vue 3 決定用 Composition API 達到一箭雙鵰的效果。
重寫響應式
在 Vue 2.x 中， Vue 通過 Object.defineProperty 轉化物件屬性 getters/setters 的方法來實現響應式，對於陣列來說額外對常用的陣列方法進行來攔截才能截獲到陣列元素的變動，但這確實也造成了一些問題，比如無法感知直接通過索引來更新陣列的場景。
在 Vue 3 中，用 ES6 的 Proxy 重寫了響應式的實現，並將其功能 API 直接暴露給開發者，換言之，開發者甚至可以將 Vue 的響應式作為一個獨立的庫來使用。
import { reactive } from 'vue'
const state = reactive({ count: 0 })
state.count++
// 觸發相應的檢視更新
// 注：Vue 3 的響應式關鍵方法有 reactive 和 ref，前者可用於所有型別的變數，而後者專門用於基本型別的變數響應式化(string/number/boolean/null/undefined/symbol)支援 Tree-shaking
Tree-shaking 是 rollup 最早提出的構建時優化方案，Webpack 4 也支援的了這一項特性，指在打包構建的過程中移除 JavaScrtipt 上下文中未引用的程式碼（dead code）。這個功能依賴於 ES6 模組系統的靜態結構特性，說白了就是 import 和 export。
由於 Vue 的不斷成長，其體積也變得越來越大（打包後也很大）。Vue 3 通過對原始碼結構的調整，讓更多的特性實現了對 Tree-shaking 的支援（v-model、<transition>），解決了這一讓官方團隊尷尬的窘境。比如用 Vue 3 實現的官方 HelloWorld demo 體積只有 13.5kb，如果只支援 Composition API 的話，體積會繼續減小到 11.75kb；涵蓋所有功能的包體積僅為 22.5kb。
總之，和 Vue 2.x 作對比，Vue 3 可謂是 More features but still lighter。
還有更多
我懶，再加上文章太長會引起不適（主要是我懶），Vue 3 中還有很多新東西我就不一一贅述了。
- 不同於 Vue 2.x，Vue 3 的原始碼全部由 TypeScript 重寫
- Vue 3 重寫了 virtual dom 的實現，元件的初始化會變的更加高效，檢視更新的效率也比以前提升了 1.3 ～ 2 倍
- Fragment 支援單元件內的多個根節點
- Teleport 傳送元件（之前叫 Portal，因為和谷歌瀏覽器團隊正在搞一個叫 portal 的原生元素，所以為了避免一些不必要的問題，乾脆改名了 ）
- Suspense 元件，類似於 React.Suspense
讓我們坐等真香
總之 Vue 3 給我的感受是更像 React 了，由 object-based 過渡到了 function-based，雖然寫慣了 Vue 2.x 的我表示 Vue 3 的第一印象有些難以接受（舉個例子：用 setup 代替了 beforeCreate 和 created，在這個入口函式中，甚至不能訪問 this!），但在多看了兩眼後也沒有那麼彆扭了，尤其是 Composition API 越看越喜歡，提供了更加靈活的編碼空間，開發者也可以更加有目的地合理組織自己的程式碼。
目前 Vue 3 剩下了一些收尾的工作，比如文件、遷移工具/指引、周邊庫的適配（vue-router、vuex）、vue-cli、devtools，相信在不遠的未來，你也可以和我一起表示真香。
