Vue3 生命周期(组合式 API)

相比选项式 API(Options API)简化了beforeCreate, created过程。

Vue3LifeCycleHook

生命周期钩子

Composition API: Lifecycle Hooks

onMounted()

onUpdated()

onUnmounted()

onBeforeMount()

onBeforeUpdate()

onBeforeUnmount()

onErrorCaptured()

onRenderTracked()

onRenderTriggered()

onActivated()

onDeactivated()

onServerPrefetch()

页面组件渲染

渲染过程

父组件onBeforeMount过程

↓

子组件onBeforeMount过程

↓

子组件onRenderTracked过程

↓

子组件onMounted过程

↓

父组件onMounted过程

在 Mounted 过程之前无法获取模板中将要render的节点

beforeMounted与Mounted过程间 Initial render, create & insert DOM nodes

vue

<script setup>
import { onBeforeMount, onMounted } from "vue";

document.querySelector(".mnode"); // null

onBeforeMount(() => {
  document.querySelector(".mnode"); // null
});

onMounted(() => {
  document.querySelector(".mnode"); // <div class="mnode">
});
</script>

<template>
  <div class="mnode"></div>
</template>

确实想要在setup和onBeforeMount里拿到节点怎么办?

使用nextTick, 等待页面渲染完成后获取

vue

<script setup>
import { onBeforeMount, nextTick } from "vue";

nextTick(() => {
  document.querySelector(".mnode"); // <div class="mnode">
});

onBeforeMount(async () => {
  await nextTick();
  document.querySelector(".mnode"); // <div class="mnode">
});
</script>

<template>
  <div class="mnode"></div>
</template>

页面组件更新

更新过程

父组件onBeforeUpdate过程

↓

父组件onBeforeUnmount过程

↓

子组件onBeforeMount过程

↓

父组件onUnmounted过程

↓

子组件onMounted过程

↓

父组件onUpdated过程

DOM 数据更新

响应式数据(ref, reactive...)触发页面re-render, patch函数进行增量更新

更新过程

组件onBeforeUpdate过程

↓

组件updated过程

vue

<script setup>
import { ref, onBeforeUpdate, onUpdated } from "vue";

const v = ref(0);

const plusv = () => {
  v.value++;
};

onBeforeUpdate(() => {
  console.log(document.querySelector(".v").textContent); // 0
});

onUpdated(() => {
  console.log(document.querySelector(".v").textContent); // 1
});
</script>

<template>
  <div @click="plusv" class="v">{{ v }}</div>
</template>

页面新旧组件切换

切换过程

父组件onBeforeUpdate过程

↓

旧组件onBeforeUnmount过程

↓

新组件onBeforeMount过程

↓

旧组件onUnmounted过程

↓

新组件onMounted过程

↓

父组件onUpdated过程

App.vue

vue

<script setup>
import { onBeforeUpdate, onUpdated, shallowRef } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import ByeWorld from "./components/ByeWorld.vue";

const world = shallowRef(HelloWorld);

const switchWorld = () => {
  world.value = ByeWorld;
};

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

onUpdated(() => {
  console.log("App onUpdated");
});
</script>

<template>
  <component :is="world" />
  <br />
  <div @click="switchWorld">switchWorld</div>
</template>

HelloWorld.vue

vue

<script setup>
import { onBeforeUnmount, onUnmounted, ref } from "vue";
const HelloWorld = ref("HelloWorld");

onBeforeUnmount(() => {
  console.log("HelloWorld onBeforeUnmount");
});

onUnmounted(() => {
  console.log("HelloWorld onUnmounted");
});
</script>

<template>
  <div>{{ HelloWorld }}</div>
</template>

ByeWorld.vue

vue

<script setup>
import { onBeforeMount, onMounted, ref } from "vue";
const ByeWorld = ref("ByeWorld");

onBeforeMount(() => {
  console.log("ByeWorld onBeforeMount");
});

onMounted(() => {
  console.log("ByeWorld onMounted");
});
</script>

<template>
  <div>{{ ByeWorld }}</div>
</template>

Vue3 生命周期(组合式 API) ​

生命周期钩子 ​

页面组件渲染 ​

页面组件更新 ​

DOM 数据更新 ​