Vue 3 组件生命周期

在 Vue 3 中，每个组件实例的生命周期都包含了一个从创建到销毁的完整过程。这一过程中，Vue 会运行一系列称为生命周期钩子的函数，允许开发者在特定的时机插入自己的代码，以便进行初始化、数据更新、清理等操作。理解 Vue 3 生命周期的各个阶段对于开发高效、可维护的应用至关重要。

Vue 3 生命周期的四个主要阶段

Vue 组件生命周期大致分为四个主要阶段：

1. 创建阶段：组件实例被创建时，开始进行数据和事件的初始化。
2. 挂载阶段：组件模板被解析并挂载到 DOM 上。
3. 更新阶段：数据发生变化时，视图和 DOM 会更新。
4. 销毁阶段：组件实例被销毁前，进行清理和释放资源。

1. Options API 生命周期

在 Vue 2 和 Vue 3 中，最常见的生命周期管理方式是 Options API，通过生命周期钩子函数来控制各个阶段的操作。下面是Options API 的生命周期函数。

1.1 创建阶段：beforeCreate 和 created

• beforeCreate：组件实例刚创建时，数据、事件等都还没有设置好。此时无法访问 data、computed、methods 等数据和方法。
• created：组件实例已完成数据初始化，data、computed、methods 等已经设置完毕，但此时还没有挂载到 DOM 中。

1.2 挂载阶段：beforeMount 和 mounted

• beforeMount：组件模板即将挂载到 DOM 前触发，此时 DOM 还不可见。
• mounted：组件模板成功挂载到 DOM 中，此时可以访问组件的 DOM 元素。

1.3 更新阶段：beforeUpdate 和 updated

• beforeUpdate：数据改变并重新渲染组件时，视图更新前触发。
• updated：数据变动后，视图已经更新完成。

1.4 销毁阶段：beforeDestroy 和 destroyed

• beforeDestroy：组件销毁前触发，此时可以进行清理操作，如清除定时器、取消网络请求等。
• destroyed：组件销毁后触发，所有绑定的事件和数据都会被销毁。

示例：Options API 生命周期钩子

<template>
  {{ salaryInfo }} <br />
  姓名：<input v-model="salaryInfo.userName"><br />
  薪资：<input type="number" v-model="salaryInfo.salary">
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
  name: "SalaryInfo",
  data() {
    return {
      salaryInfo: reactive({
        userName: "王一",
        salary: 15000
      })
    }
  },
  methods: {
    setSalary() {
      this.salaryInfo.salary += 1000;
      console.log(this.salaryInfo);
    }
  },
  created() {
    console.log('组件创建完成')
  },
  mounted() {
    console.log('组件挂载完成')
  },
  beforeDestroy() {
    console.log('组件销毁前')
  },
  destroyed() {
    console.log('组件销毁后')
  }
}
</script>

在此示例中，created 钩子在组件创建时触发，而 mounted 在组件挂载到 DOM 后触发。这些钩子可以让你在组件的生命周期中执行自定义逻辑。

2. Composition API 生命周期

Vue 3 推出了 Composition API，它通过 setup 函数来组织和管理组件逻辑。通过 Composition API，我们可以更灵活地使用生命周期钩子函数，确保代码的可维护性和可重用性。

2.1 创建阶段：setup

setup 函数是 Vue 3 中的核心，它在组件实例被创建时执行，在这里可以定义组件的响应式数据、方法和生命周期钩子。需要注意的是，setup 是在 beforeCreate 和 created 之前执行的。

2.2 挂载阶段：onBeforeMount 和 onMounted

• onBeforeMount：在组件挂载之前触发，可以用于进行一些准备工作。
• onMounted：组件挂载完成后触发，此时可以访问 DOM 元素。

2.3 更新阶段：onBeforeUpdate 和 onUpdated

• onBeforeUpdate：数据更新之前触发，可以在此时执行与数据变动相关的逻辑。
• onUpdated：数据更新并渲染完成后触发，适用于需要操作 DOM 或依赖更新后的数据进行操作的场景。

2.4 卸载阶段：onBeforeUnmount 和 onUnmounted

• onBeforeUnmount：组件卸载前触发，可以进行清理操作，如移除定时器、取消请求等。
• onUnmounted：组件卸载后触发，所有与该组件相关的资源都会被清理。

示例：Composition API 生命周期钩子

<template>
  <div>
    薪水：<input type="number" v-model="salary" /> <br />
    <button @click="addSum">薪水 +1000</button>
  </div>
</template>

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

let salary = ref(0)

function addSum() {
  salary.value += 1000
  console.log('薪水增加：', salary.value)
}

console.log('setup 初始化')

// 生命周期钩子
onBeforeMount(() => {
  console.log('挂载之前')
})

onMounted(() => {
  console.log('挂载完成')
})

onBeforeUpdate(() => {
  console.log('更新之前')
})

onUpdated(() => {
  console.log('更新完成')
})

onBeforeUnmount(() => {
  console.log('组件卸载前')
})

onUnmounted(() => {
  console.log('组件卸载后')
})
</script>

在上述示例中，我们在 setup 函数中定义了组件的数据和方法，并利用 Vue 3 的 Composition API 钩子函数来管理生命周期。每个钩子函数都会在特定的生命周期阶段触发，开发者可以在这些钩子中编写需要的逻辑，比如数据处理、DOM 操作或资源清理等。

3. 比较 Options API 与 Composition API 生命周期

生命周期钩子	Options API	Composition API
创建阶段	beforeCreate，created	setup
挂载阶段	beforeMount，mounted	onBeforeMount，onMounted
更新阶段	beforeUpdate，updated	onBeforeUpdate，onUpdated
销毁阶段	beforeDestroy，destroyed	onBeforeUnmount，onUnmounted

可以看到，Composition API 在生命周期钩子的命名上与 Options API 不同，它采用了更简洁、语义化的函数名称，并且所有的生命周期钩子都可以直接在 setup 函数内部使用。

4. 总结

Vue 3 的生命周期是组件从创建到销毁的一个重要过程，通过生命周期钩子，我们可以在不同阶段插入自定义代码进行初始化、更新、销毁等操作。Vue 3 引入的 Composition API 使得生命周期管理更加灵活和模块化，尤其适合处理复杂的逻辑和数据。

• Options API 提供了传统的生命周期钩子，通过函数配置的方式进行管理。
• Composition API 提供了更灵活的方式，钩子函数可以直接在 setup 中使用，且更加清晰。

理解 Vue 3 生命周期的各个阶段和钩子函数的应用，将帮助开发者更高效地管理组件状态和数据流，并创建高性能、易维护的应用。