生命周期类方法

生命周期方法通常叫作生命周期钩子，在配置式 API 中我们已经了解了具体的生命周期方法，在组合式 API 的 setup 方法中同样有对应的生命周期方法，它们的对应关系如下：

beforeCreate -> 使用 setup() 替代
created -> 使用 setup() 替代
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activated -> onActivated
deactivated -> onDeactivated

export default {
  data() {
    return {
      count: 0
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
};

由于 setup 方法在组件的 beforeCreate 和 created 之前执行，因此不再提供对应的钩子方法，这些生命周期钩子注册函数只能在 setup 方法内同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例（此时正在调用其 setup 的组件实例），在没有当前活动实例的情况下，调用它们将会出错。同时，在这些生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除，这点和配置式 API 是一致的，如示例代码4-5-1所示。

示例代码4-5-1　生命周期类方法

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

const MyComponent = {
    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');
        });

        return {};
    }
}