vue3新特性：
一、使用Proxy替換Object.defineProperty，重構響應式系統，使用Proxy優勢：
2、監聽的目標為對象本身，不需要像Object.defineProperty一樣遍歷每個屬性，有一定的性能提升
3、可攔截apply、ownKeys、has等13種方法，而Object.defineProperty不行
4、直接實現對象屬性的新增/刪除
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>