vue2和vue3的區別？
vue2和vue3的主要區別在于以下幾點：
1、生命周期函數鉤子不同
2、數據雙向綁定原理不同
3、定義變量和方法不同
4、指令和插槽的使用不同
5、API類型不同
6、是否支持碎片
7、父子之間傳參不同
8、main.js文件中部分設置不同
下面詳細說明具體有哪些不同？
一、生命周期函數鉤子不同
| vue2 | vue3 |
|
beforeCreate 組件創建之前 created 組件創建之后 beforeMount 組件掛載到頁面之前執行 mounted 組件掛載到頁面之后執行 beforeUpdate 組件更新之前 updated 組件更新之后 |
setup 開始創建組件 onBeforeMount 組件掛載到頁面之前執行 onMounted 組件掛載到頁面之后執行 onBeforeUpdate 組件更新之前 onUpdated 組件更新之后 |
注意：vue3.x生命周期在調用前 需要先引入。除上述的鉤子函數外，還增加了onRenderTracked和onRenderTriggered。
二、數據雙向綁定原理不同
| vue2 | vue3 |
| 利用ES5的一個APIObject.defineProperty()對數據進行劫持，結合發布者訂閱者模式的方式來實現的。 |
使用了ES6的Proxy API對數據代理。 |
vue3提供的proxy API代理的優勢在于：
1、defineProperty只能監聽某個屬性，不能對全對象監聽
2、可以省去for...in，閉包等內容來提升效率（直接綁定整個對象即可）
3、可以監聽數組，不再單獨的對數組做特異性處理。可以檢測到數組內部數據的變化。
三、定義變量和方法不同
| vue2 | vue3 |
| 在data中定義變量，在methods中創建方法 | 使用一個新的setup方法 |
vue3提供的setup方法在組件初始化構造的時候觸發，使用以下三個步驟建立反應性數據：
1、從vue引入reactive
2、使用reactive方法來聲明數據為響應性數據
3、使用setup方法返回響應性數據，從而template可以獲取這些響應式數據。
四、指令和插槽的使用不同
| vue2 | vue3 |
|
不建議將v-for和v-if寫在一起使用 允許直接使用slot |
將v-if當作v-for大的一個判斷語句，不會相互沖突 移除keyCode作為v-on的修飾符，不支持config.keyCodes 移除v-on.native修飾符 移除過濾器filter 不允許直接使用slot，正確格式為 v-slot |
五、API類型不同
| vue2 | vue3 |
|
選項型api （在代碼中分割不同屬性：data，computed，methods等） |
組合型api （使用方法進行分隔，顯得更加簡便整潔） |
六、是否支持碎片
| vue2 | vue3 |
| 否 | 是，即可以擁有多個根節點 |
七、父子之間傳參不同
| vue2 | vue3 |
|
父傳子： 子組件通過prop接收 子傳父： 子組件中通過$emit向父組件觸發一個監聽方法，傳遞一個參數 |
使用setup()中的第二個參數content對象中有emit，只需要在setup()接收第二個參數中使用分解對象法取出emit就可以在setup方法中隨意使用了。 |
八、main.js文件不同
| vue2 |
vue3 |
| 使用prototype（原型）的形式進行操作，引入的是構造函數 | 需要使用結構的形式進行操作，引入的是工廠函數；vue3中app組件中可以沒用根標簽 |
浙公網安備 33010602011771號