生命周期

1. 概念

Vue 组件实例在创建时要经历一系列的初始化步骤。在此过程中，Vue 会在合适的时机调用特定的函数，让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为生命周期钩子。

2. 生命周期阶段

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。每个阶段都有两个钩子，一前一后。

3. Vue2 和 Vue3 的生命周期对比

以下是 Vue2 和 Vue3 的生命周期钩子的对比表格，重点标记了两者之间的不同之处。

阶段	Vue2 生命周期钩子	Vue3 生命周期钩子	备注
创建	beforeCreate	setup	Vue3 使用 setup 取代了 beforeCreate 和 created
	created
挂载	beforeMount	onBeforeMount
	mounted	onMounted
更新	beforeUpdate	onBeforeUpdate
	updated	onUpdated
销毁	beforeDestroy	onBeforeUnmount	Vue3 使用 onBeforeUnmount 取代了 beforeDestroy
	destroyed	onUnmounted	Vue3 使用 onUnmounted 取代了 destroyed

4. 重点不同之处

• 创建阶段：

  • Vue2 的 beforeCreate 和 created 钩子在 Vue3 中被 setup 钩子取代。
  • setup 是 Vue3 新增的组合式 API，用于初始化数据和方法。

• 销毁阶段：

  • Vue2 的 beforeDestroy 钩子在 Vue3 中被 onBeforeUnmount 取代。
  • Vue2 的 destroyed 钩子在 Vue3 中被 onUnmounted 取代。

5. 常用的钩子

• onMounted：挂载完毕。
• onUpdated：更新完毕。
• onBeforeUnmount：卸载之前。

6. 生命周期钩子的示例

以下是一个使用 Vue3 生命周期钩子的示例，详细展示每个钩子的用法和触发时机。

<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<!-- Vue3 写法 -->
<script lang="ts" setup name="Person">
import { 
  ref, 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated, 
  onBeforeUnmount, 
  onUnmounted 
} from 'vue';

// 数据
let sum = ref(0);

// 方法
function changeSum() {
  sum.value += 1;
}

console.log('setup'); // 组件初始化时打印

// 生命周期钩子

// 挂载阶段
onBeforeMount(() => {
  console.log('挂载之前'); // 在挂载开始之前调用
});
onMounted(() => {
  console.log('挂载完毕'); // 实例被挂载后调用
});

// 更新阶段
onBeforeUpdate(() => {
  console.log('更新之前'); // 数据更新之前调用
});
onUpdated(() => {
  console.log('更新完毕'); // 数据更新完成并且 DOM 重新渲染之后调用
});

// 销毁阶段
onBeforeUnmount(() => {
  console.log('卸载之前'); // 实例卸载之前调用
});
onUnmounted(() => {
  console.log('卸载完毕'); // 实例卸载之后调用
});
</script>

• 创建阶段：

  • 在 Vue2 中，beforeCreate 在实例初始化之后调用，但尚未进行任何数据观测和事件配置。created 在实例创建完成后调用，数据观测和事件配置已经完成，但实例还未挂载到 DOM 上。
  • 在 Vue3 中，setup 是一个新的生命周期钩子，用于取代 beforeCreate 和 created。setup 在实例创建之初调用，用于初始化数据和方法，并且可以返回一个对象，包含组件的响应式数据和方法。

• 挂载阶段：

  • onBeforeMount 在挂载开始之前调用，可以在此时进行一些初始化工作。
  • onMounted 在实例被挂载后调用，可以在此时进行一些需要 DOM 的操作。

• 更新阶段：

  • onBeforeUpdate 在数据更新之前调用，可以在此时进行一些准备工作。
  • onUpdated 在数据更新完成并且 DOM 重新渲染之后调用，可以在此时进行一些后续处理。

• 销毁阶段：

  • 在 Vue2 中，beforeDestroy 在实例销毁之前调用。destroyed 在实例销毁之后调用。
  • 在 Vue3 中，onBeforeUnmount 取代了 beforeDestroy，在实例卸载之前调用。onUnmounted 取代了 destroyed，在实例卸载之后调用。