vue2和vue3生命周期

vue3虽然推荐使用“组合式”写法，但是也支持“选项式”写法，所以在用“选项式”写法时，有两种生命周期的写法如下，两种都可以正常执行，vue3同级优先级会比vue2高。

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.info("vue3生命周期");
    });
  },
  mounted() {
    console.info("vue2生命周期");
  }
}

vue2生命周期

创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数

创建后：Created() 是最早使用data和methods中数据的钩子函数

挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树

挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步

更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

更新后：Updated() 内存和页面都是新的

销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

销毁后：Destroyed() 已经销毁完毕

vue3 生命周期

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。

参考原文链接： https://blog.csdn.net/qq252750818/article/details/124740398