Vue3的新特性

 

1、響應系統的變動

由原來的Object.defineProperty 的getter 和 setter，改變成為了ES2015 Proxy 作為其觀察機制。
Proxy的優勢：消除了以前存在的警告，使速度加倍，並節省了一半的內存開銷。

Proxy的屬性及方法

2、虛擬DOM重寫（Virtual DOM Rewrite）

虛擬 DOM 從頭開始重寫，我們可以期待更多的編譯時提示來減少運行時開銷。重寫將包括更有效的代碼來創建虛擬節點。

 

 

虛擬DOM重寫.png

3、組件渲染的優化（優化插槽生成）

Vue2當中在父組件渲染同時，子組件也會渲染。 Vue3就可以單獨渲染父組件、子組件。

 

 

優化插槽生成.png

4、靜態樹提升（Static Tree Hoisting）

使用靜態樹提升，這意味着 Vue 3 的編譯器將能夠檢測到什么是靜態組件，然后將其提升，從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。

 

 

靜態樹提升（.png

5、靜態屬性提升（Static Props Hoisting）

此外，我們可以期待靜態屬性提升，其中 Vue 3 將跳過不會改變節點的打補丁過程。

 

 

靜態屬性提升.png

總體來說：1. 更快 2. 更小 3. 更容易維護 4. 更加友好 5. 更容易使用