| index | 項目 | Vue2 | Vue3 |
| 1 | 生命週期函數 | beforeCreate與created | stepup代替beforeCreate與created |
| 2 | 響應式原理api | Es5 Object.defineProperty()進⾏數據劫持，結合發布訂閱的⽅式實現 | 使⽤的是Es6 Proxy代理，使⽤ref或者reactive將數據轉化為響應式數據 |
| 3 | 渲染策略 | 提供類似於HTML的模板語法，將模板編譯成渲染函數來返回虛擬DOM樹 |
1.在DOM樹級別。
2.編譯器積極地檢測模板中的靜態節點、子樹甚至數據對象，並在生成的代碼中將它們提升到渲染函數之外
3.在元素級別。編譯器還根據需要執行的更新類型，為每個具有動態綁定的元素生成一個優化標誌。例如，具有動態類綁定和許多靜態屬性的元素將收到一個標誌，提示只需要進行類檢查。運行時將獲取這些提示並採用專用的快速路徑。
|
| 4 | Diff算法的提升 | 小於Vue3 | 大於Vue2 |
| 5 | 打包體積變化 | 未使用的代碼文件都被打包了進去，所以後期項目大了，打包文件會特別多還很大 | 允許現代模式下的module bundler能夠靜態地分析模塊依賴關係，並刪除與未使用的module.exports屬性相關的代碼。模板編譯器還生成了對樹抖動友好的代碼，只有在模板中實際使用某個特性時，該代碼才導入該特性的幫助程序 |
| 6 | 建立數據 data | 選項類型API（Options API) | 組合類型API(Composition API) |
| 7 | typeScript的支持 | 支持類型的，用的是Facebook的Flow做類型檢查 | 借鑒了react hook實現了更自由的編程方式，提出了Composition API，Composition API不需要通過指定一長串選項來定義組件，而是允許用戶像編寫函數一樣自由地表達、組合和重用有狀態的組件邏輯，同時提供出色的TypeScript支持。 |
| 8 | 事件偵聽器緩存 | 綁定事件每次觸發都要重新生成全新的function去更新 | 提供了事件緩存對象，cacheHandlers，當 cacheHandlers 開啟，會自動生成一個內聯函數，同時生成一個靜態節點。當事件再次觸發時，只需從緩存中調用即可，無需再次更新 |
| 9 | 異步組件 | - | defineAsyncComponent:
loader：同工廠函數;
loadingComponent：加載異步組件時展示的組件；
errorComponent：加載組件失敗時展示的組件；
delay：顯示loadingComponent之前的延遲時間，單位毫秒，默認200毫秒；
timeout：如果提供了timeout，並且加載組件的時間超過了設定值，將顯示錯誤組件，默認值為Infinity（單位毫秒）；
suspensible：異步組件可以退出
onError：一個函數，該函數包含4個參數，分別是error、retry、fail和attempts，這4個參數分別是錯誤對象、重新加載的函數、加載程序結束的函數、已經重試的次數。
|
| 10 | 自定義渲染render |
h 從 Vue 2.x 的參數傳遞，改為全域導入
渲染函數參數的更動，使狀態元件和函數式元件之間更加一致。
vnode 現在有一個扁平的 prop 結構。
|
h 現在是全域導入，而不是作為參數自動傳遞，render 函式不再接收任何參數。。
|