官方文档

生命周期钩子函数 - Vue 组合式 API

官方声明周期图示

image

具体变化

1. 与 2.x 版本生命周期相对应的组合式 API

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

可以发现：

1. beforeCreate 和 created 与 setup 几乎是同时进行的，所以可以把写在beforeCreate 和 created 这两周期的代码直接写在 setup 里即可。
2. 命名都形如 onXXX。
3. beforeDestroy 和 destroyed 改为 onBeforeUnmount 和 onUnmounted ，更语义化了。

代码演示：

初始化页面

初始化页面的控制台输出

<template>
  <div id="app">
    <h1>{{ greet }}</h1>
    <button @click="change">vue3</button>
  </div>
</template>

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

export default {
  name: "App",
  setup() {
    const greet = ref("Hello World");
    function change() {
      greet.value = "Hello Vue3";
    }

    console.log("setup");
    console.log("------------------");

    onBeforeMount(() => {
      // console.log(el, binding, vnode, prevVnode);
      console.log("onBeforeMount");
      console.log("------------------");
    });
    onMounted(() => {
      console.log("onMounted");
      console.log("------------------");
    });

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
      console.log("------------------");
    });
    onUpdated(() => {
      console.log("onUpdated");
      console.log("------------------");
    });

    onBeforeUnmount(() => {
      console.log("onUpdated");
      console.log("------------------");
    });
    onMounted(() => {
      console.log("onMounted");
      console.log("------------------");
    });

    return {
      greet,
      change
    };
  }
};
</script>

点击按钮后的页面

点击按钮后控制台输出

新增的钩子函数

除了和 2.x 生命周期等效项之外，组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

两个钩子函数都接收一个 DebuggerEvent，与 watchEffect 参数选项中的 onTrack 和 onTrigger 类似：

<template>
  <div id="app">
    <h1>{{ greet }}</h1>
    <button @click="change">vue3</button>
  </div>
</template>

<script lang="ts">
import { DebuggerEvent, onRenderTriggered, ref } from "vue";

export default {
  name: "App",
  setup() {
    const greet = ref("Hello World");
    function change() {
      greet.value = "Hello Vue3";
    }

    console.log("setup");
    console.log("------------------");

    onRenderTriggered((event: DebuggerEvent) => {
      console.log(event);
      console.log("onRenderTriggered");
      console.log("------------------");
    });

    return {
      greet,
      change
    };
  }
};
</script>

点击按钮后