1. vue2和vue3雙向數據綁定原理發生了改變

vue2的雙向數據綁定是利用了es5 的一個API Object.definepropert() 對數據進行劫持 結合發布訂閱模式來實現的。vue3中使用了es6的proxyAPI對數據進行處理。相比與vue2，使用proxy API 優勢有：defineProperty只能監聽某個屬性，不能對全對象進行監聽；可以省去for in 、閉包等內容來提升效率（直接綁定整個對象即可）；可以監聽數組，不用再去單獨的對數組做特異性操作，vue3可以檢測到數組內部數據的變化。

2.Vue3支持碎片（Fragments）

就是說可以擁有多個跟節點。

3. Composition API

Vue2 與vue3 最大的區別是vue2使用選項類型api，對比vue3合成型api。舊得選項型api在代碼里分割了不同得屬性：data,computed,methods等；新得合成型api能讓我們使用方法來分割，相比于舊的API使用屬性來分組，這樣代碼會更加簡便和整潔。

4. 建立數據data

vue2是把數據放入data中，vue3就需要使用一個新的setup()方法，此方法在組件初始化構造得時候觸發。使用一下三個步驟來簡=建立反應性數據： 
1. 從vue引入reactive；使用reactive() 方法來聲明數據為響應性數據；
3. 使用setup()方法來返回我們得響應性數據，從而template可以獲取這些響應性數據。

5. 生命周期

vue2     --------------- vue3

beforeCreate                         ->   setup()

Created                                 ->   setup()

beforeMount                          ->   onBeforeMount

mounted                                ->    onMounted

beforeUpdate                        ->    onBeforeUpdate

updated                                 ->    onUpdated

beforeDestroyed                    ->    onBeforeUnmount

destroyed                              ->     onUnmounted

activated                                ->     onActivated

deactivated                            ->     onDeactivated

6. 父子傳參不同，setup()函數特性

setup()函數接收兩個參數：props、context(包含attrs、slots、emit)
setup函數是處于生命周期beforeCreated和created倆個鉤子函數之前
執行setup時，組件實例尚未被創建（在setup()內部，this不會是該活躍實例得引用，即不指向vue實例，Vue為了避免我們錯誤得使用，直接將setup函數中得this修改成了undefined）
與模板一起使用時，需要返回一個對象
因為setup函數中，props是響應式得，當傳入新的prop時，它將會被更新，所以不能使用es6解構，因為它會消除prop得響應性，如需解構prop，可以通過使用setup函數中得toRefs來完成此操作。父傳子，用props,子傳父用事件 Emitting Events。在vue2中，會調用this$emit然后傳入事件名和對象；在vue3中得setup()中得第二個參數content對象中就有emit，那么我們只要在setup()接收第二個參數中使用分解對象法取出emit就可以在setup方法中隨意使用了。

7.在setup()內使用響應式數據時，需要通過 .value 獲取

import { ref } from 'vue'

const count = ref(0)

console.log(count.value)

8.從setup() 中返回得對象上得property 返回并可以在模板中被訪問時，它將自動展開為內部值。不需要在模板中追加.value。

9.setup函數只能是同步的不能是異步的。

總結

以上是生活随笔為你收集整理的vue2和vue3区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。