摘要：模板語法的將保持不變?；诘挠^察者機(jī)制目前，的反應(yīng)系統(tǒng)是使用的和。為了繼續(xù)支持，將發(fā)布一個(gè)支持舊觀察者機(jī)制和新版本的構(gòu)建。

還有幾個(gè)月距離vue2的首次發(fā)布就滿3年了，而vue的作者尤雨溪也在去年年末發(fā)布了關(guān)于vue3.0的計(jì)劃，如果不出意外，我們將在今年的某個(gè)時(shí)間點(diǎn)見證Vue3.0的發(fā)布，雖然前幾天在《StateOfJS: 2018年JavaScript生態(tài)圈趨勢報(bào)告》一文中我們看到目前Vue的使用者比React還少了不少，但在Github上Vue的star數(shù)已經(jīng)超越React，可見用戶對(duì)Vue的喜愛，那即將發(fā)布的Vue3又有什么新特性呢？我們一起來看看吧！

Vue 3.0 已經(jīng)在原型設(shè)計(jì)階段了，而且我們已經(jīng)實(shí)現(xiàn)了一個(gè)與 2.0 的特性近乎相等的運(yùn)行時(shí)了。下文中列出的許多條目，要么已經(jīng)實(shí)現(xiàn)了，要么已經(jīng)確認(rèn)可實(shí)現(xiàn)。那些還未實(shí)現(xiàn)或者仍在探索階段的條目會(huì)用一個(gè)“*”標(biāo)記

一句話簡介：更小巧，更快速；支持搖樹優(yōu)化；支持 Fragments 和跨組件渲染；支持自定義渲染器。

更小巧：這份新的代碼庫在設(shè)計(jì)之初就考慮到了對(duì)“搖樹優(yōu)化 (tree-shaking)”的友好。那些如內(nèi)置組件 (、) 、運(yùn)行時(shí)工具性指令（v-model）等特性將變?yōu)榘葱鑼?dǎo)入，所以也是“可搖樹的”。對(duì)于這個(gè)新的運(yùn)行時(shí)，它的大小將永遠(yuǎn)保持在 10kb 之下。另外，使這些特性變?yōu)椤翱蓳u樹的”后，我們就可以提供更多的內(nèi)置特性，同時(shí)還不會(huì)增加網(wǎng)絡(luò)負(fù)載——如果沒使用到這些特性的話。

搖樹優(yōu)化，是一種在打包時(shí)去除沒用到的代碼的優(yōu)化手段，谷歌有一篇教程可以了解下: Reduce JavaScript Payloads with Tree Shaking

更快：在前期的基準(zhǔn)測試中，我們看到整體性能有了一倍的提升，包括虛擬DOM的掛載和打補(bǔ)丁(patching，指更新——譯注) 的速度（我們從 Inferno 那里學(xué)了好些個(gè)技巧過來——Inferno 是目前速度最快的虛擬DOM實(shí)現(xiàn)），以及組件實(shí)例化速度和數(shù)據(jù)監(jiān)測的性能。在 3.0 中，你應(yīng)用的啟動(dòng)時(shí)間將縮減一半。

支持 Fragments 和 Portal：雖然體積更小了，但 3.0 還將內(nèi)置對(duì) Fragments (即允許組件擁有多個(gè)根節(jié)點(diǎn)) 和 Portal (即允許在 DOM 的其他位置進(jìn)行渲染，而不是組件內(nèi)部) 的支持。

關(guān)于 Portal ，你可以將其理解為跨組件渲染或者異地渲染，vue-portal 是一個(gè)第三方實(shí)現(xiàn)，可以了解一下；Fragments 特性也有一個(gè)第三方庫，但譯者認(rèn)為這個(gè)庫的內(nèi)部實(shí)現(xiàn)不夠完善，叫做 vue-fragments，感興趣可以了解一下。

增強(qiáng)的 slot 機(jī)制：所有由編譯器生成的 slot 都將是函數(shù)形式，并且在子組件的 render 函數(shù)被調(diào)用過程中才被調(diào)用 (譯注：現(xiàn)在只有 scoped slot 才是函數(shù)形式，其渲染的時(shí)機(jī)也是在父組件的渲染進(jìn)行時(shí)）。這使得 slot 中的依賴項(xiàng) (即數(shù)據(jù)——譯注) 將被作為子組件的依賴項(xiàng)，而不是現(xiàn)在的父組件；從而意味著：1）當(dāng) slot 的內(nèi)容發(fā)生變動(dòng)時(shí)，只有子組件會(huì)被重新渲染；2）當(dāng)父組件重新渲染時(shí)，如果子組件的內(nèi)容未發(fā)生變動(dòng)，子組件就沒必要重新渲染。這種機(jī)制的改變，可以提供更精確的變動(dòng)探測，也就可以消除沒必要的重渲染。

支持自定義渲染器 (Renderer)：這個(gè) API 可以用來創(chuàng)建自定義的渲染器，它將作為“一等公民”出現(xiàn)，到時(shí)不再需要 fork 一份 Vue 的代碼來通過修改實(shí)現(xiàn)自定義。這個(gè) API 的到來，將使得那些如 Weex 和 NativeScript 的“渲染為原生應(yīng)用”的項(xiàng)目保持與 Vue 的同步更新變得更加容易。除此之外，還將使得那些為了各種用途而創(chuàng)建自定義渲染器變得極其容易。

如果采用的是支持“搖樹優(yōu)化”的打包器，模板中使用到的那些可選特性，在生成的代碼中將通過 ES 的模塊語法導(dǎo)入；而在打包后的文件中，那些沒用到的可選特性就會(huì)被“搖掉”。

由于新的虛擬 DOM 實(shí)現(xiàn)所帶來的提升，我們可以執(zhí)行一些更加高效的編譯耗時(shí)優(yōu)化，如靜態(tài)樹提升(static tree hoisting)、靜態(tài)屬性提升(static props hoisting)；以及為運(yùn)行時(shí)提供一些來自編譯器的提示，以此避開子組件的規(guī)范過程 (children normalization)；提供 VNode 快速創(chuàng)建路徑； 等等。

我們計(jì)劃對(duì)解析器進(jìn)行重寫，以便在對(duì)模板進(jìn)行編譯發(fā)生錯(cuò)誤時(shí)，可以提供錯(cuò)誤發(fā)生的位置信息；除此之外還可以帶來對(duì)模板的 source map 支持；還可以支持第三方工具如 eslint-plugin-vue 和 IDE 的語言服務(wù) (language services) 特性。

一句話介紹：除渲染函數(shù) API 和 scoped-slot 語法之外，其余均保持不變或者將通過另外構(gòu)建一個(gè)兼容包來兼容 2.x。

模板語法的 99% 將保持不變。除了 scoped slot 語法可能會(huì)有一些微調(diào)之外，我們還沒有任何其他針對(duì)模板的變動(dòng)計(jì)劃。

3.0 版本將原生地支持基于 class 的組件，而且無需借助任何編譯及各種 stage 階段的特性，以此提供良好的編寫體驗(yàn)。許多現(xiàn)有的 (組件) 配置項(xiàng)將有對(duì)應(yīng)的合理的 class 版本的 API。各種 stage 階段的特性，如 class 的靜態(tài)字段和裝飾器 (decorator) 等仍然可以選擇性地使用，以此增強(qiáng)編寫體驗(yàn)。另外，整體的 API 在設(shè)計(jì)時(shí)也將考慮 TypeScript 的類型推斷特性。3.x 的代碼庫本身將用 TypeScript 來編寫，并提供增強(qiáng)的 TypeScript 支持。(就是說，TypeScript 的使用與否仍然是整體可選的)

2.x 系列的基于對(duì)象的組件格式仍將受支持，不過會(huì)在內(nèi)部將其轉(zhuǎn)換為一個(gè)相應(yīng)的 class。

仍然支持 Mixins。*

為了避免在安裝插件時(shí)造成對(duì) Vue 的運(yùn)行時(shí)的修改，頂層 API 可能會(huì)做一個(gè)大的翻修。到時(shí)，插件的作用域?qū)⒅痪窒薜骄唧w的一個(gè)組件樹，使得對(duì)那些依賴于某些具體插件的組件的測試變得容易，也會(huì)使得在同一個(gè)頁面中掛載多個(gè)使用不同插件——但使用同一個(gè) Vue 運(yùn)行時(shí)——的 Vue 應(yīng)用變?yōu)榭赡堋?

函數(shù)式組件將支持純函數(shù)的書寫形式——不過，這樣的話異步組件就需要通過一個(gè)輔助性函數(shù)來顯式地創(chuàng)建了。

變動(dòng)最大的部分將是渲染函數(shù) (render) 中的虛擬DOM的格式。我們現(xiàn)在正在收集主流的第三方庫的作者們的反饋，在對(duì)這些變動(dòng)有了更多的信心之后，我們還會(huì)將更多的細(xì)節(jié)曝光；雖然變動(dòng)較大，但是只要你沒在你的應(yīng)用中重度使用手寫的渲染函數(shù) (不是指 JSX)，那么變動(dòng)之后的升級(jí)應(yīng)該會(huì)比較容易。

一句話介紹：更優(yōu)良的內(nèi)部模塊解耦；TypeScript；更易于貢獻(xiàn)的代碼庫。

在從零開始編寫 3.0 之初，“達(dá)到更加清晰和更易維護(hù)的架構(gòu)，特別是為了讓代碼的貢獻(xiàn)變得容易”就是我們的目標(biāo)。為了對(duì)復(fù)雜性進(jìn)行隔離，我們將一些內(nèi)部功能拆分為了多個(gè)多帶帶的包。例如，observer 模塊將成為一個(gè)多帶帶的包，擁有自己對(duì)外的 API 和自己的測試用例；不過請(qǐng)注意，這不會(huì)對(duì)框架級(jí)的 API 造成影響——你不需要另外手動(dòng)從多個(gè)包里導(dǎo)入許多小件小件的模塊就可以使用 Vue，相反 Vue 的最終包會(huì)事先裝配好這些內(nèi)部包。

另外，代碼庫現(xiàn)在改為了用 TypeScript 編寫；雖然這會(huì)使得“熟練TypeScript”成為對(duì)新代碼庫進(jìn)行貢獻(xiàn)的一個(gè)前置要求，不過我們相信有類型信息配合 IDE 的支持，對(duì)于一個(gè)新的貢獻(xiàn)者來說，要做出有意義的貢獻(xiàn)，實(shí)際上反而會(huì)更加容易。

將 observer 和 scheduler 解耦為分開的兩個(gè)包后，我們還可以拿一些替代的實(shí)現(xiàn)對(duì)這兩個(gè)包進(jìn)行置換試驗(yàn)。例如，我們可以實(shí)現(xiàn)一個(gè)兼容 IE11、API 也相同的 observer；或者實(shí)現(xiàn)另外一種利用 requestIdleCallback 來在長耗時(shí)的更新中產(chǎn)出工作成果到瀏覽器的 scheduler。

隨著虛擬 DOM 重寫，我們可以期待更多的 編譯時(shí)（compile-time）提示來減少 運(yùn)行時(shí)（runtime）開銷。重寫將包括更有效的代碼來創(chuàng)建虛擬節(jié)點(diǎn)。

在當(dāng)前的 Vue 版本中，當(dāng)父組件重新渲染時(shí)，其子組件也必須重新渲染（11月20日更新：這句話是不嚴(yán)謹(jǐn)?shù)?，非常容易產(chǎn)生誤導(dǎo)，我覺得有必要說明一下： 2.0 組件的重新渲染就是組件粒度的，除非修改的數(shù)據(jù)是子組件的 props，才會(huì)觸發(fā)子組件的重新渲染。引用自：https://juejin.im/pin/5bf28dd...）。 使用 Vue 3 ，可以多帶帶重新渲染父組件和子組件。

使用靜態(tài)樹提升，這意味著 Vue 3 的編譯器將能夠檢測到什么是靜態(tài)組件，然后將其提升，從而降低了渲染成本。它將能夠跳過未整個(gè)樹結(jié)構(gòu)打補(bǔ)丁的過程。

此外，我們可以期待靜態(tài)屬性提升，其中 Vue 3 將跳過不會(huì)改變節(jié)點(diǎn)的打補(bǔ)丁過程。

目前，Vue 的反應(yīng)系統(tǒng)是使用 Object.defineProperty 的 getter 和 setter。 但是，Vue 3 將使用 ES2015 Proxy 作為其觀察者機(jī)制。 這消除了以前存在的警告，使速度加倍，并節(jié)省了一半的內(nèi)存開銷。

為了繼續(xù)支持 IE11，Vue 3 將發(fā)布一個(gè)支持舊觀察者機(jī)制和新 Proxy 版本的構(gòu)建。

一句話介紹：IE 11 將受到支持，但將會(huì)是另外構(gòu)建一個(gè)版本 (build) 的形式支持，不過這個(gè)版本會(huì)存在與 Vue 2.x 響應(yīng)式機(jī)制所存在的同樣的局限。

新的代碼庫目前只針對(duì)主流瀏覽器，而且我們假定他們都支持 ES2015。但是，哎，我們也知道在可預(yù)見的未來還有很多用戶仍然需要支持 IE11。除了 Proxy 外，大多數(shù) ES2015 的特性都可以用轉(zhuǎn)譯或者墊片的方式在 IE11 中使用。我們的計(jì)劃是另外多帶帶實(shí)現(xiàn)一個(gè)具有同樣 API 的替代性 observer，不過是基于老式的 Object.defineProperty API；然后再通過多帶帶構(gòu)建一個(gè)使用這個(gè)實(shí)現(xiàn)的 Vue 3.x 版本 (build) 進(jìn)行發(fā)布，不過這個(gè)多帶帶的版本還是會(huì)有 Vue 2.x 在變動(dòng)探測方面所存在的問題，所以它其實(shí)并不是一個(gè)完全兼容 3.x 的一個(gè)版本。我們也意識(shí)到這會(huì)給第三方庫的作者們帶來某些不便，因?yàn)樗麄冃枰紤]兩個(gè)不同版本之間的兼容性問題，不過當(dāng)我們真的推進(jìn)到那個(gè)階段時(shí)，那時(shí)我們肯定會(huì)確保提供一份清晰的指導(dǎo)。

一句話介紹：更加全面、精準(zhǔn)、高效；更具可調(diào)試性的響應(yīng)跟蹤；以及可用來創(chuàng)建響應(yīng)式對(duì)象的 API。

3.0 將帶來一個(gè)基于 Proxy 的 observer 實(shí)現(xiàn)，它可以提供覆蓋語言 (JavaScript——譯注) 全范圍的響應(yīng)式能力，消除了當(dāng)前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限，如：

對(duì)屬性的添加、刪除動(dòng)作的監(jiān)測

對(duì)數(shù)組基于下標(biāo)的修改、對(duì)于 .length 修改的監(jiān)測

對(duì) Map、Set、WeakMap 和 WeakSet 的支持

另外這個(gè)新的 observer 還有以下特性：

公開的用于創(chuàng)建 observable (即響應(yīng)式對(duì)象——譯注) 的 API。這為小型到中型的應(yīng)用提供了一種輕量級(jí)的、極其簡單的跨組件狀態(tài)管理解決方案。（譯注：在這之前我們可以通過另外 new Vue({data : {...}}) 來創(chuàng)建這里所謂的 observable；另外，其實(shí) vuex 內(nèi)部也是用這種方式來實(shí)現(xiàn)的）

默認(rèn)為惰性監(jiān)測（Lazy Observation）。在 2.x 版本中，任何響應(yīng)式數(shù)據(jù)，不管它的大小如何，都會(huì)在啟動(dòng)的時(shí)候被監(jiān)測。如果你的數(shù)據(jù)量很大的話，在應(yīng)用啟動(dòng)的時(shí)候，這就可能造成可觀的性能消耗。而在 3.x 版本中，只有應(yīng)用的初始可見部分所用到的數(shù)據(jù)會(huì)被監(jiān)測，更不用說這種監(jiān)測方案本身其實(shí)也是更加快的。

更精準(zhǔn)的變動(dòng)通知。舉個(gè)例子：在 2.x 系列中，通過 Vue.set 強(qiáng)制添加一個(gè)新的屬性，將導(dǎo)致所有依賴于這個(gè)對(duì)象的 watch 函數(shù)都會(huì)被執(zhí)行一次；而在 3.x 中，只有依賴于這個(gè)具體屬性的 watch 函數(shù)會(huì)被通知到。

不可變監(jiān)測對(duì)象（Immutable observable）：我們可以創(chuàng)建一個(gè)對(duì)象的“不可變”版本，以此來阻止對(duì)他的修改——包括他的嵌套屬性，除非系統(tǒng)內(nèi)部臨時(shí)解除了這個(gè)限制。這種機(jī)制可以用來凍結(jié)傳遞到組件屬性上的對(duì)象和處在 mutation 范圍外的 Vuex 狀態(tài)樹。

更良好的可調(diào)試能力：通過使用新增的 renderTracked 和 renderTriggered 鉤子，我們可以精確地追蹤到一個(gè)組件發(fā)生重渲染的觸發(fā)時(shí)機(jī)和完成時(shí)機(jī)，及其原因。

不必太過擔(dān)心，至少還能緩半年。

參考來源：
Plans for the Next Iteration of Vue.js
[[譯] 尤雨溪：Vue 3.0 計(jì)劃](https://juejin.im/post/5bb719...