Vue2和Vue3的部分区别

1. 生命周期：

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

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

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无需每次渲染都传递一个新函数

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

标签：逻辑,生命周期,区别,钩子,API,Vue2,Vue3
来源： https://www.cnblogs.com/shallow-dreamer/p/16500272.html