Vue.js 3.0 新特性預覽

Evan You（尤雨溪）（2018年11月16日）前幾日的早上在 Vue Toronto 的主題演講中預演了 Vue 3 。

利用現代瀏覽器支持的新功能，Vue 3 將成爲咱們已經瞭解和喜好的 Vue.js 強大的的改進版本。

咱們作了一些筆記並將其與下面的幻燈片結合起來分享給你們。

總結起來，Vue 3 如下方面值得咱們期待 ：

• 更快
• 更小
• 更易於維護
• 更多的原生支持
• 更易於開發使用

完整的PPT： https://docs.google.com/presentation/d/1yhPGyhQrJcpJI2ZFvBme3pGKaGNiLi709c37svivv0o/edit#slide=id.p

Evan 和 Vue 團隊的目標是儘量順利地過渡到 Vue 3 ，在這個過程當中，這些變化在無形地改善了框架。

讓 Vue 更快

雖然 Vue 已經很是快了，但 Evan 認爲 Vue 3 會更快。如何作到呢…

重寫虛擬DOM (Virtual DOM Rewrite)

隨着虛擬 DOM 重寫，咱們能夠期待更多的 編譯時（compile-time）提示來減小 運行時（runtime）開銷。重寫將包括更有效的代碼來建立虛擬節點。

優化插槽生成(Optimized Slots Generation)

在當前的 Vue 版本中，當父組件從新渲染時，其子組件也必須從新渲染（11月20日更新：這句話是不嚴謹的，很是容易產生誤導，我以爲有必要說明一下： 2.0 組件的從新渲染就是組件粒度的，除非修改的數據是子組件的 props，纔會觸發子組件的從新渲染。

引用自：

https://juejin.im/pin/5bf28ddd6fb9a056783705fc

使用 Vue 3 ，能夠單獨從新渲染父組件和子組件。

靜態樹提高(Static Tree Hoisting)

使用靜態樹提高，這意味着 Vue 3 的編譯器將可以檢測到什麼是靜態組件，而後將其提高，從而下降了渲染成本。它將可以跳過未整個樹結構打補丁的過程。

靜態屬性提高（Static Props Hoisting）

此外，咱們能夠期待靜態屬性提高，其中 Vue 3 將跳過不會改變節點的打補丁過程。

基於 Proxy 的觀察者機制

目前，Vue 的反應系統是使用 Object.defineProperty 的 getter 和 setter。

可是，Vue 3 將使用 ES2015 Proxy 做爲其觀察者機制。 這消除了之前存在的警告，使速度加倍，並節省了一半的內存開銷。

爲了繼續支持 IE11，Vue 3 將發佈一個支持舊觀察者機制和新 Proxy 版本的構建。

使 Vue 更小

Vue已經很是小了，在運行時（runtime）壓縮後大約 20kb 。 但咱們能夠期待它會變得更加小，新的核心運行時壓縮後大概 10kb 。 這將在很大程度上經過消除不使用的庫(也稱爲Tree Shaking)來實現。 例如，若是您沒有使用 過渡（transition）元素，則不會包含它。

下面您能夠看到 hello world 應用程序與壓縮後的大小的比較。

使其更具可維護性

雖然大多數 Vue 開發人員都沒有在庫自己上工做，但很高興知道 Vue 3 將帶來更多可維護的源代碼。 它不只會使用 TypeScript ，並且許多軟件包將被解耦，使全部內容更加模塊化。

更多的原生支持

運行時內核也將與平臺無關，使得 Vue 能夠更容易地與任何平臺（例如Web，iOS或Android）一塊兒使用。

更易於開發使用

Observer 模塊已被解壓縮到本身的包中，容許您以新的方式使用它：

跟蹤從新渲染的位置也會更容易。 在 Evan 的演講中，他作了一些實時編碼，並展現瞭如何跟蹤 Vue 應用程序（使用下面的代碼）來找出觸發組件從新渲染的內容。 這在更大的應用程序和性能微調中很是有用。

Vue 3.0 還會改進對 TypeScript 的支持，容許在編輯器中進行高級的類型檢查和有用的錯誤和警告。

實驗性的 Hooks API

當咱們須要在 Vue 中共享兩個組件之間的行爲時，咱們一般使用 Mixins 。然而，Evan 正在嘗試使用 Hooks API 來避免來自 Mixins 的一些問題，而且更適合使用慣用的 Vue 代碼。

實驗性的 Time Slicing 支持

當您有許多組件同時嘗試從新渲染時，任何瀏覽器均可以開始變得很慢，從而使用戶體驗降低。 Evan展現了他如未嘗試使用 Time Slicing，將 JS 的執行分解爲幾個部分，若是有用戶交互須要處理，這些部分將提供給瀏覽器。

小結

很高興能看到 Vue 更具競爭力，模塊化，更容易調試和更多的開發樂趣。

另外上面說的這些內容除了「明年晚些時候」以外，尚未一個明確的發佈日期哦

看來你們還能緩一陣子啦~~