官網：https://vue3js.cn/
下一代web開發方式，更快，更輕，易維護，更多的原生支持
vue3是完全兼容vue2的
vue3特性
- 創建實例的方式
vue2以new Vue（{}）.$mount('#app')
vue3 以Vue.createApp().mount('#app')
- Teleport
將一個元素或者一個組件渲染到規定的節點中，可以脫離vue范圍
- 自定義渲染函數
- 響應性原理改變
vue2中用的是Object.defineProperty的getter和setter（實現攔截需要手動設置）
vue3采用的是全新的es6語法 proxy【除了ie之外的其他瀏覽器】，底層采用了proxy的effect和trigger
ie瀏覽器依舊采用的是Object.defineProperty
- vue3新增了全新一套功能 --組合式API--Composition API
- Fragment模板實現多個根元素
vue2升級到vue3
安裝
npm install -g @vue/cli
升級
npm update -g @vue/cli
創建vue3項目與創建vue2的方式一樣，在這里選擇3.x版本
如果忘記選擇vue3，創建的項目默認選擇的是v2.0 ，可以使用下面命令
add vue-next
vue3 performance（性能）提升分析
- diff算法優化
vue2中的虛擬dom是進行全量的對比
vue3中新增了靜態標記（patchFlag），只對比帶有PF的節點，並且通過Flag的信息得知當前節點要對比的具體內容
地址：https://vue-next-template-explorer.netlify.app
我們看一下vue2和vue3在渲染數據時的狀況
- 全局api分塊(Tree Shaking機制)
Tree Shaking稱為“搖樹優化” ；Tree Shaking就是把無用的模塊進行“剪枝”，很多沒有用到的Api就不會打包到最后的包里
Tree Shaking的前提是所有的內容必須用 ES6 module的import
- 靜態提升
vue2中無論元素是否參與更新，每次都會重新創建，然后再渲染
vue3中對於不參與更新的元素，會做靜態提升，只會被創建一次，在渲染時直接復用即可
- cacheHandlers事件偵聽器緩存
默認情況下onClick會被視為動態綁定，所以每次都會去追蹤它的變化
但是因為是統一個函數，所以沒有追蹤變化，直接緩存起來復用就可以
