一宵膨、vue3?的理解和區(qū)別
1迁酸、性能優(yōu)化
雙向響應(yīng)原理由Object.defineProperty改為基于ES6的Proxy,使其顆粒度更大瓜客,速度更快胎挎,且消除了之前存在的警告、重寫了 Vdom 忆家,使其突破了 Vdom 的性能瓶頸、進行了模板編譯的優(yōu)化德迹、進行了更加高效的組件初始化
Tree-Shaking 的支持
支持了tree-shaking(剪枝):像修剪樹葉一樣把不需要的東西給修剪掉芽卿,使 Vue3 的體積更小。
需要的模塊才會打入到包里胳搞,優(yōu)化后的 Vue3.0 的打包體積只有原來的一半(13kb)卸例。哪怕把所有的功能都引入進來也只有23kb称杨,依然比 Vue2.x 更小。像keep-alive筷转、transition甚至v-for等功能都可以按需引入姑原。
Composition API
composition-api是一個 Vue3 中新增的功能,它的靈感來自于React Hooks呜舒,是比mixin更強大的存在锭汛。
composition-api可以提高代碼邏輯的可復(fù)用性,從而實現(xiàn)與模板的無關(guān)性袭蝗;同時使代碼的可壓縮性更強唤殴。另外,把Reactivity模塊獨立開來到腥,意味著 Vue3.0 的響應(yīng)式模塊可以與其他框架相組合朵逝。composition-api把復(fù)雜組件的邏輯抽地更緊湊,而且可以將公共邏輯進行抽取乡范。
Fragments
不再限制template只有一個根節(jié)點配名。
render函數(shù)也可以返回數(shù)組了,有點像React.Fragments
Better TypeScript Support
更好的類型推導(dǎo)晋辆,使得 Vue3 把TypeScript支持得非常好
Custom Renderer API
實現(xiàn)用DOM的方式進行WebGL編程
二渠脉、vue2?和3?的區(qū)別
1、默認進行懶觀察(lazy observation)
在 2.x 版本里栈拖,不管數(shù)據(jù)多大连舍,都會在一開始就為其創(chuàng)建觀察者。當數(shù)據(jù)很大時涩哟,這可能會在頁面載入時造成明顯的性能壓力索赏。3.x 版本,只會對「被用于渲染初始可見部分的數(shù)據(jù)」創(chuàng)建觀察者贴彼,而且 3.x 的觀察者更高效潜腻。
2、更精準的變更通知器仗。
舉例來說:2.x 版本中融涣,使用 Vue.set 來給對象新增一個屬性時,這個對象的所有 watcher 都會重新運行精钮;3.x 版本中威鹿,只有依賴那個屬性的 watcher 才會重新運行。3.轨香、新加入了 TypeScript 以及 PWA 的支持
3忽你、vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變
vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個 API Object.definePropert()對數(shù)據(jù)進行劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的。
vue3 中使用了 es6 的 ProxyAPI 對數(shù)據(jù)代理臂容。
相比于vue2.x科雳,使用proxy的優(yōu)勢如下
defineProperty只能監(jiān)聽某個屬性根蟹,不能對全對象監(jiān)聽
可以省去for in、閉包等內(nèi)容來提升效率(直接綁定整個對象即可)
可以監(jiān)聽數(shù)組糟秘,不用再去單獨的對數(shù)組做特異性操作 vue3.x可以檢測到數(shù)組內(nèi)部數(shù)據(jù)的變化
4简逮、LifeCycle(Hooks) 3.0當中的生命周期與2.0的生命周期出現(xiàn)了很大的不同:
beforeCreate -> 請使用 setup()
created -> 請使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured