Vue2 & Vue3 生命周期钩子函数及示例

export default {
  // 创建前
  beforeCreate() {
    console.log('beforeCreate: 数据未初始化');
  },
  // 创建后
  created() {
    console.log('created: 数据已初始化');
  },
  // 挂载前
  beforeMount() {
    console.log('beforeMount: 模板编译完成，未挂载');
  },
  // 挂载后
  mounted() {
    console.log('mounted: 挂载完成，可访问DOM');
  },
  // 更新前
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  // 更新后
  updated() {
    console.log('updated: 数据更新后');
  },
  // 销毁前
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  },
  // 销毁后
  destroyed() {
    console.log('destroyed: 实例销毁后');
  },
  // keep-alive 激活
  activated() {
    console.log('activated: keep-alive组件激活');
  },
  // keep-alive 失活
  deactivated() {
    console.log('deactivated: keep-alive组件失活');
  },
  // 错误捕获
  errorCaptured(err, vm, info) {
    console.log('errorCaptured: 捕获到错误', err, info);
  }
}

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount: 组件挂载前');
    });
    onMounted(() => {
      console.log('onMounted: 组件挂载后');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate: 组件更新前');
    });
    onUpdated(() => {
      console.log('onUpdated: 组件更新后');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: 组件卸载前');
    });
    onUnmounted(() => {
      console.log('onUnmounted: 组件卸载后');
    });
    onActivated(() => {
      console.log('onActivated: keep-alive组件激活');
    });
    onDeactivated(() => {
      console.log('onDeactivated: keep-alive组件失活');
    });
    onErrorCaptured((err, instance, info) => {
      console.log('onErrorCaptured: 捕获到错误', err, info);
    });
  }
}