vue2和vue3的区别

1. 性能改进：性能方面要比vue2更快。它引入了proxy响应式系统，比vue2中的Object.defineProperty实现更高效

   • 在vue2中，需要使用Object.defineProperty对每个属性进行逐一定义；而在vue3中，可以使用proxy对象来劫持数据变化，也就是proxy对象可以直接拦截JS对象的所有操作，就可以更细地监听属性的变化。这样就能使性能更好

2. 引入Composition API：也是函数式写法，相比于vue2的Options API，组合API能更好的组织和复用组件逻辑，尤其可以将逻辑封装为自定义的hooks形式，再去别的组件复用，还可以避免代码耦合问题

3. 引入Teleport组件：这个组件用在组件树外部渲染内容。它允许我们将组件的内容插入到DOM结构中的任何位置，不会受组件嵌套层级的限制

4. Fragments：vue3支持在template中创建多个根节点，而不需要包裹额外的父元素

vue2和vue3的生命周期

1. vue的生命周期就是vue实例创建到销毁的过程。也就是vue实例从创建、初始化数据、编译模板、挂载DOM并渲染、更新并渲染、销毁等一系列过程。由一系列钩子函数组成。

2. vue2生命周期：

   • 创建前后：

     1. beforeCreate()—实例初始化之后、数据观测和event/watcher事件配置之前调用。初始化工作，比如可以创建全局事件总线，设置拦截器
     2. created()—组件实例被创建并完成数据观测之后调用。这个阶段组件实例已经创建完成，但是DOM还没有渲染，可以访问组件实例中的方法和属性

   • 挂载前后：

     1. beforeMount()—组件挂载之前调用。可以做一些准备工作
     2. mounted()—组件挂载到DOM后调用。这个阶段DOM已经渲染完毕，可以访问DOM元素，进行一些初始化DOM操作

   • 更新前后：

     1. beforeUpdate()—数据更新之前、DOM重新渲染之前调用。可以在这里获取更新前各种状态，修改数据
     2. updated()—数据更新并且DOM重新渲染之后调用。可以执行与更新相关的操作

   • 卸载前后：

     1. beforeDestroy()—组件销毁之前调用。可以进行一些清理工作，如清理监听器、取消订阅
     2. destroyed()—组件销毁之后调用。进行最后的清理

3. 组织API和setup函数：

   • 在vue3中，可以使用Composition API来组织组件逻辑，将相关代码放在同一个地方。

   • setup函数中，可以使用以on开头形式的钩子函数来替代生命周期函数的使用

     • 创建前后：

       1. beforeCreate()
       2. onBeforeMount()
       3. created()
       4. onMounted()

     • 更新前后：

       1. onBeforeUpdate()
       2. onUpdated()

     • 卸载前后：

       1. onBeforeUnmount()
       2. onUnmounted()