Vue2和Vue3的部分区别

1. 生命周期：

   整体变化不大，只是大部分生命周期钩子前+"on"，功能是类似的。需要注意的是，Vue3在组合式API中使用生命周期钩子时需要先引入，Vue2在选项API中是可以直接使用的。

   //Vue3
   <script setup>
       import {{生命周期钩子}} from 'vue'
       生命周期钩子(() => {})
    	//可以将不同的逻辑拆成多个相同的生命周期钩子，它会按照顺序执行不会被覆盖
   </script>
   
   //Vue2
   <script>
   	export default{
           生命周期钩子(){}  //直接调用
        	//如果书写相同的生命周期钩子，后面的会覆盖前面的   
       }
   </script>
   

   Vue2和Vue3生命周期对比：

   Vue2	Vue3	备注
   beforeCreate	setup()	创建前
   created	setup()	创建后
   beforeMount	onBeforeMount	挂载前
   mounted	onMounted	挂载后
   beforeUpdate	onBeforeUpdate	更新前
   updated	onUpdated	更新后
   beforeDestroy	onBeforeUnmount	卸载前
   destroyed	onDestoyed	卸载后
   errorCaptured	onErrorCaptured	子孙组件异常时激活
   actived	onActived	keep-alive激活时
   deactived	onDeactived	keep-alive停用时
   	onRenderTracked onRenderTriggered	调试钩子

2. 根节点：

   Vue2：只能存在一个根节点。

   Vue3：可以存在多个根节点。

   //Vue2
   <template>
   	<div>  <!-- 唯一的根节点 -->
           <header></header>
           <main></main>
           <footer></footer>
       </div>
   </template>
   
   //Vue3
   <template>
   	<!-- 多个根节点 -->
   	<header></header>
   	<main></main>
   	<footer></footer>
   </template>
   

3. API：

   Vue2：选项API（Options API），一个逻辑会散乱在文件的不同位置，会导致代码的可读性变差，不易维护，当需要修改某个逻辑时，需要来回跳转文件位置。

   Vue3：组合式API（Composition API），可将同一逻辑的内容写在一起，增强了代码的可读性。

4. 响应式原理：

   Vue2：Object.defineProperty

   Vue3：proxy

5. 事件缓存：

   Vue3的cacheHandler可在第一次渲染后缓存事件，相对Vue2无需每次渲染都传递一个新函数

6. v-for和v-if的优先级：

   Vue2：v-for的优先级比v-if高。如果v-for和v-if同时使用会造成遍历出的子项都会进行v-if判断，极大地浪费计算资源。

   Vue3：v-if的优先级比v-for高。

参考文献地址：https://juejin.cn/post/7067413380922867725