早上刷微博看到 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 版本的代碼也會一如既往健康地繼續工做着。javascript
Beta 版本的發佈說明官方團隊先前所規劃的新特性已經所有完成開發,接下來的工做將會致力於框架的總體穩定性和周邊庫的新版本適配。html
在全部 Vue 的更新中,最引發我注意的就是那些「拆出來的 API」,它們並無涉及什麼新的概念,本質上就是將 Vue 的一些核心功能(諸如建立組件、觀察響應式狀態)暴露給了開發者,能夠用來代替組件經典的對象式寫法(Options API)。
在 Vue 2.x 版本中,組件的組織方式是基於對象的,即 object-based Options API,隨着 Vue 的使用愈來愈普遍,這種框架模式也遇到了本質上的瓶頸。當開發者的組件愈來愈大,稍有不慎就會變的很醜 ,其中涉及的邏輯處理也會變得很臃腫,這個時候開發者是沒法將這些代碼按照業務功能分類組織的,由於 Options API 在設計之初就認爲此類業務代碼應當被合理的分置在組件的各項 Options(data、computed、props、methods、生命週期鉤子)中,因此組件越大,代碼的可讀性就越差。其次,在大型的項目中重用某些邏輯變得有些困難,目前的解決方案好比 mixins,並不能很好得解決這些問題。vue
因而,Vue 3 決定用 Composition API 達到一舉兩得的效果。java
在 Vue 2.x 中, Vue 經過 Object.defineProperty
轉化對象屬性 getters/setters 的方法來實現響應式,對於數組來講額外對經常使用的數組方法進行來攔截才能截獲到數組元素的變更,但這確實也形成了一些問題,好比沒法感知直接經過索引來更新數組的場景。react
在 Vue 3 中,用 ES6 的 Proxy 重寫了響應式的實現,並將其功能 API 直接暴露給開發者,換言之,開發者甚至能夠將 Vue 的響應式做爲一個獨立的庫來使用。webpack
import { reactive } from 'vue' const state = reactive({ count: 0 }) state.count++ // 觸發相應的視圖更新 // 注:Vue 3 的響應式關鍵方法有 reactive 和 ref,前者可用於全部類型的變量,然後者專門用於基本類型的變量響應式化(string/number/boolean/null/undefined/symbol)
Tree-shaking 是 rollup 最先提出的構建時優化方案,Webpack 4 也支持的了這一項特性,指在打包構建的過程當中移除 JavaScrtipt 上下文中未引用的代碼(dead code)。這個功能依賴於 ES6 模塊系統的靜態結構特性,說白了就是 import
和 export
。git
因爲 Vue 的不斷成長,其體積也變得愈來愈大(打包後也很大)。Vue 3 經過對源碼結構的調整,讓更多的特性實現了對 Tree-shaking 的支持(v-model、<transition>
),解決了這一讓官方團隊尷尬的窘境。好比用 Vue 3 實現的官方 HelloWorld demo 體積只有 13.5kb,若是隻支持 Composition API 的話,體積會繼續減少到 11.75kb;涵蓋全部功能的包體積僅爲 22.5kb。es6
總之,和 Vue 2.x 做對比,Vue 3 可謂是 More features but still lighter。github
我懶,再加上文章太長會引發不適(主要是我懶),Vue 3 中還有不少新東西我就不一一贅述了。web
總之 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,相信在不遠的將來,你也能夠和我一塊兒表示真香。