1、數(shù)據(jù)綁定原理不同

vue2：vue2的數(shù)據(jù)綁定是利用ES5的一個API：Object.definePropert() 對數(shù)據(jù)進行劫持，結合發(fā)布訂閱模式的方式來實現(xiàn)的。

vue3：vue3中使用了ES6的Proxy API對數(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ù)的變化。

2、是否支持碎片

vue2：vue2不支持碎片。

vue3：vue3支持碎片（Fragments），就是說可以擁有多個根節(jié)點。

3、API類型不同

vue2：vue2使用選項類型api，選項型api在代碼里分割了不同的屬性：data,computed,methods等。

vue3：vue3使用組合式api，新的合成型api能讓我們使用方法來分割，相比于舊的api使用屬性來分組，這樣代碼會更加簡便和整潔。

4、定義數(shù)據(jù)變量和方法不同

vue2：vue2是把數(shù)據(jù)放入data中，在vue2中定義數(shù)據(jù)變量是data(){}，創(chuàng)建的方法要在methods:{}中。

vue3：，vue3就需要使用一個新的setup()方法，此方法在組件初始化構造的時候觸發(fā)。使用以下三個步驟來建立反應性數(shù)據(jù)：

從vue引入reactive；

使用reactive() 方法來聲明數(shù)據(jù)為響應性數(shù)據(jù)；

使用setup()方法來返回我們的響應性數(shù)據(jù)，從而template可以獲取這些響應性數(shù)據(jù)。

5、生命周期鉤子函數(shù)不同

vue2：vue2中的生命周期：

beforeCreate 組件創(chuàng)建之前

created 組件創(chuàng)建之后

beforeMount 組價掛載到頁面之前執(zhí)行

mounted 組件掛載到頁面之后執(zhí)行

beforeUpdate 組件更新之前

updated 組件更新之后

vue3：vue3中的生命周期：

setup 開始創(chuàng)建組件前

onBeforeMount 組價掛載到頁面之前執(zhí)行

onMounted 組件掛載到頁面之后執(zhí)行

onBeforeUpdate 組件更新之前

onUpdated 組件更新之后

而且vue3.x 生命周期在調(diào)用前需要先進行引入。除了這些鉤子函數(shù)外，vue3.x還增加了onRenderTracked 和onRenderTriggered函數(shù)。

6、父子傳參不同

vue2：父傳子，用props,子傳父用事件 Emitting Events。在vue2中，會調(diào)用this$emit然后傳入事件名和對象。

vue3：父傳子，用props,子傳父用事件 Emitting Events。在vue3中的setup()中的第二個參數(shù)content對象中就有emit，那么我們只要在setup()接收第二個參數(shù)中使用分解對象法取出emit就可以在setup方法中隨意使用了。

7、指令與插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for與v-if在vue2中優(yōu)先級高的是v-for指令，而且不建議一起使用。

vue3：vue3中必須使用v-slot的形式；vue3中v-for與v-if,只會把當前v-if當做v-for中的一個判斷語句，不會相互沖突；vue3中移除keyCode作為v-on的修飾符，當然也不支持config.keyCodes；vue3中移除v-on.native修飾符；vue3中移除過濾器filter。

8、main.js文件不同

vue2：vue2中我們可以使用pototype(原型)的形式去進行操作，引入的是構造函數(shù)。

vue3：vue3中需要使用結構的形式進行操作，引入的是工廠函數(shù)；vue3中app組件中可以沒有根標簽。