vue3.0新特性有哪些

Evan You（尤雨溪）在2018年11月16日）早上在 Vue Toronto 的主題演講中預覽了 Vue 3 。利用現代瀏覽器支援的新功能，Vue 3 將成為我們已經了解和喜愛的 Vue.js 強大的改進版本。

總結起來，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已經非常小了，在運行時（runtime）壓縮後大約 20kb 。但我們可以期待它會變得更加小，新的核心運行時壓縮後大概 10kb 。這將在很大程度上透過消除不使用的函式庫(也稱為Tree Shaking)來實現。例如，如果您沒有使用 過渡（transition）元素，則不會包含它。

更具可維護性：

雖然大多數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 的執行分解為幾個部分，如果有使用者互動需要處理，這些部分將提供給瀏覽器。

以上是vue3.0新特性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！