官方文檔

生命周期鉤子函數(shù) - Vue 組合式 API

官方聲明周期圖示

image

具體變化

1. 與 2.x 版本生命周期相對(duì)應(yīng)的組合式 API

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

可以發(fā)現(xiàn)：

1. beforeCreate 和 created 與 setup 幾乎是同時(shí)進(jìn)行的，所以可以把寫(xiě)在beforeCreate 和 created 這兩周期的代碼直接寫(xiě)在 setup 里即可。
2. 命名都形如 onXXX。
3. beforeDestroy 和 destroyed 改為 onBeforeUnmount 和 onUnmounted ，更語(yǔ)義化了。

代碼演示：

初始化頁(yè)面

初始化頁(yè)面的控制臺(tái)輸出

<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>

點(diǎn)擊按鈕后的頁(yè)面

點(diǎn)擊按鈕后控制臺(tái)輸出

新增的鉤子函數(shù)

除了和 2.x 生命周期等效項(xiàng)之外，組合式 API 還提供了以下調(diào)試鉤子函數(shù)：

• onRenderTracked
• onRenderTriggered

兩個(gè)鉤子函數(shù)都接收一個(gè) DebuggerEvent，與 watchEffect 參數(shù)選項(xiàng)中的 onTrack 和 onTrigger 類(lèi)似：

<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>

點(diǎn)擊按鈕后