vue3新特性：

一、使用Proxy替換Object.defineProperty，重構響應式系統，使用Proxy優勢：

proxy的缺點：

1、es6的proxy不支援低版本瀏覽器（IE11）
2、會針對IE11出一個特殊版本進行支援

二、原始碼使用ts重寫，更好的型別推導

其實TypeScript並不是一門新的語言，它是 JavaScript 型別的超集，typeScript那並不是一個新語言，可以理解為加強JavaScript的buff，TypeScript最大的優勢源於強大的型別系統，還有就是在編寫程式碼的時候就可以檢測出我們可能因為粗心造成的不必要的錯誤。

所以建議學習一下ts：

為什麼要學習TypeScript ?

• 未來趨勢，目前來看發展，和應用趨勢很快
• vue3.0釋出後，基本就離不開ts了
• 使用 TypeScript 可以幫助我們防止在編寫 JavaScript 程式碼時因為資料型別的轉換造成的意想不到的錯誤。提前幫我們發現程式碼出現錯的風險。
• 團隊成員使用 JavaScript 時很容易瞎寫，不受規範約束。但是如果使用TypeScript那大家都不得不遵守規範。
• TypeScript 緊跟 JavaScript 的發展，ES7 、ES8、ES9 相關語言的新特性都支援，比瀏覽器支援的速度更快。

什麼樣的專案需要TypeScript ？

• 團隊多人開發的大專案
• 開源專案
• 企業對程式碼有高質量要求的專案

三、虛擬DOM新演算法（更快、更小）

四、提供了composition api，為更好的邏輯複用與程式碼組織

首先，我們要知道由於vue3.0語法跟vue2.x的語法幾乎是完全相容的，所以你還是按照vue2.x的寫法也是可以的，但是我們最好能學習一些新的API。

所以涉及到了一個新的東西vite：

vite的安裝使用

vite倉庫地址https://github.com/vuejs/vite上面有詳細的安裝使用教程，按照步驟安裝即可。

composition-api解決了什麼問題

使用傳統的option配置方法寫元件的時候問題，隨著業務複雜度越來越高，程式碼量會不斷的加大；由於相關業務的程式碼需要遵循option的配置寫到特定的區域，導致後續維護非常的複雜，同時代碼可複用性不高，而composition-api就是為了解決這個問題而生的。

語法糖介紹

compositon-api提供了一下幾個函式

• reactive
• watchEffect
• computed
• ref
• toRefs
• 生命週期的hooks

這些我就不在這裡介紹了，這個我還在學習中，之後學到了再去記錄。。。

五、自定義渲染器（app、小程式、遊戲開發）

Vue3.0中支援 自定義渲染器 (Renderer)：這個 API 可以用來自定義渲染邏輯。

1.自定義渲染器的原理
渲染器是圍繞 Virtual DOM 而存在的，在 Web 平臺下它能夠把 Virtual DOM 渲染為瀏覽器中的真實 DOM 物件，為了能夠將 Virtual DOM 渲染為真實 DOM，渲染器內部需要呼叫瀏覽器提供的 DOM 程式設計介面，下面羅列了在出上一章中我們曾經使用到的那些瀏覽器為我們提供的 DOM 程式設計介面：

document.createElement / createElementNS：建立標籤元素。
document.createTextNode：建立文字元素。
el.nodeValue：修改文字元素的內容。
el.removeChild：移除 DOM 元素。
el.insertBefore：插入 DOM 元素。
el.appendChild：追加 DOM 元素。
el.parentNode：獲取父元素。
el.nextSibling：獲取下一個兄弟元素。
document.querySelector：掛載 Portal 型別的 VNode 時，用它查詢掛載點。

六、Fragment，模板可以有多個根元素

vue-fragments

我們知道vue2.x在模版裡面跟元素div只能有一個，如果寫多個，在執行渲染的時候就會報錯，

vue3.0引入了fragments，讓其可以有多個跟元素；

vue-fragments可以作為一個外掛安裝到你的Vue專案中

import { Plugin } from "vue-fragments";
Vue.use(Plugin);

該外掛註冊了一個全域性VFragment元件，將其用作元件模板中的包裝器，類似於React片段的語法：

<template>
  <v-fragment>
    <div>Fragment 1</div>
    <div>Fragment 2</div>
  </v-fragment>
</template>