一、Vue3 與 Vue2 區別
對于生命周期來說，整體上變化不大，只是大部分生命周期鉤子名稱上 + “on”，功能上是類似的。不過有一點需要注意，組合式API的Vue3 中使用生命周期鉤子時需要先引入，而 Vue2 在選項API中可以直接調用生命周期鉤子，如下所示。
// vue3
<script setup>
import { onMounted } from 'vue'; // 使用前需引入生命周期鉤子onMounted(() => {// ...
});// 可將不同的邏輯拆開成多個onMounted，依然按順序執行，不會被覆蓋
onMounted(() => {// ...
});
</script>// vue2
<script>
export default { mounted() { // 直接調用生命周期鉤子 // ... }, }
</script>
?常用生命周期對比
二. 多根節點?
熟悉 Vue2 的朋友應該清楚，在模板中如果使用多個根節點時會報錯，如下所示。
// vue2中在template里存在多個根節點會報錯
<template><header></header><main></main><footer></footer>
</template>// 只能存在一個根節點，需要用一個<div>來包裹著
<template><div><header></header><main></main><footer></footer></div>
</template>
但是，Vue3 支持多個根節點，也就是 fragment。即以下多根節點的寫法是被允許的。
<template><header></header><main></main><footer></footer>
</template>
三. Composition API
Vue2 是選項API（Options API），一個邏輯會散亂在文件不同位置（data、props、computed、watch、生命周期鉤子等），導致代碼的可讀性變差。當需要修改某個邏輯時，需要上下來回跳轉文件位置。
Vue3 組合式API（Composition API）則很好地解決了這個問題，可將同一邏輯的內容寫到一起，增強了代碼的可讀性、內聚性，其還提供了較為完美的邏輯復用性方案。
四.異步組件
<tempalte><suspense><template #default><List /></template><template #fallback><div>Loading... </div></template></suspense>
</template>
