Vue3生命周期

Vue3与Vue2版本生命周期相对应的组合式API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

<template>
  <div class="about">
    <h2>msg: {{msg}}</h2>
    <hr />
    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">
  import {
    ref,
    onMounted,
    onUpdated,
    onUnmounted,
    onBeforeMount,
    onBeforeUpdate,
    onBeforeUnmount,
  } from "vue";

  export default {
    beforeCreate() {
      console.log("beforeCreate()");
    },

    created() {
      console.log("created");
    },

    beforeMount() {
      console.log("beforeMount");
    },

    mounted() {
      console.log("mounted");
    },

    beforeUpdate() {
      console.log("beforeUpdate");
    },

    updated() {
      console.log("updated");
    },

    beforeUnmount() {
      console.log("beforeUnmount");
    },

    unmounted() {
      console.log("unmounted");
    },

    setup() {
      const msg = ref("abc");

      const update = () => {
        msg.value += "--";
      };

      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 {
        msg,
        update,
      };
    },
  };
</script>

<template>
  <h2>App</h2>
  <button @click="isShow=!isShow">切换</button>
  <hr />
  <Child v-if="isShow" />
</template>

<script lang="ts">
  import Child from "./Child.vue";
  export default {
    data() {
      return {
        isShow: true,
      };
    },

    components: {
      Child,
    },
  };
</script>