今天寫這篇文章主要是為了給自己重溫下Vue3.0的新特性，也為了給各位前端朋友做個簡單的介紹。目前vue3的開發已經在Alpha階段，之後應該會有Beta版本，源碼地址在：https://github.com/vuejs/vue-next。預計正式上線要在2020年的第二季度。

說起Vue3的新特性，簡單來說就是：更快、更小 、更容易維護 、更加友好 、更容易使用。具體的主要表現在以下幾個方面。

一、、兼容性的變化

目前打包後的代碼是 ES2015+，不支持 IE 11。當然，在後期的正式版本中也可能做進一步瀏覽器的兼容。

二、編寫語言的不同

目前的代碼 98% 以上使用 TypeScript 編寫。

如果你還沒有學習 TypeScript，請儘快學習，否則可能看不懂源碼。

另外有件事情說出來可能會讓你非常驚訝，Vue 3 的源代碼完全沒有使用 class 關鍵字！（只在測試代碼和示例代碼裡用到了 class 關鍵字）

三、響應系統的變動

Vue3由原來的Object.defineProperty 的getter 和 setter，改變成為了ES2015 Proxy 作為其觀察機制。

defineProperty缺點：

1.無法監聽數組變化

2.只能劫持對象的屬性,屬性值也是對象那麼需要深度遍歷

proxy的優點：

1、可以監聽數據和對象的變化，不用深度遍歷

2、proxy有多達13種的攔截方法

3、proxy返回的是一個新對象， 可以通過操作返回的新的對象達到監聽的目的

注意：

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

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

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

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

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

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

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

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

閱讀更多 滬漂程序員的生活史 的文章

關鍵字: 瀏覽器 TypeScript 對象