一、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