Vue.js 3.0 新特性預覽
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
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 版本中，當父元件重新渲染時，其子元件也必須重新渲染。 使用 Vue 3 ，可以單獨重新渲染父元件和子元件。
靜態樹提升(Static Tree Hoisting)
使用靜態樹提升，這意味著 Vue 3 的編譯器將能夠檢測到什麼是靜態元件，然後將其提升，從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。
靜態屬性提升（Static Props Hoisting）
此外，我們可以期待靜態屬性提升，其中 Vue 3 將跳過不會改變節點的打補丁過程。
基於 Proxy 的觀察者機制
目前，Vue 的反應系統是使用 ObectDefineProperty 的 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進行編碼了，我很高興能看到 Vue 更具競爭力，模組化，更容易除錯和更多的開發樂趣。 另外上面說的這些內容除了“明年晚些時候”之外，還沒有一個明確的釋出日期。
英文原文：https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547