1. vue2.x 的生命周期

2. vue3 的生命周期

3.生命周期对比

• beforeCreate -> setup 代替
• created -> setup 代替
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated

// 2.0 中为 beforeDestroy 和 destroyed

• beforeUnmount -> onBeforeUnmount
• mounted -> onUnmounted

// 用于处理错误

• errorCaptured -> onErrorCaptured

// 新增的专门用于调试

• renderTracked -> onRenderTracked
• renderTriggered -> 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>