Vue 生命周期及其钩子函数深入浅出

2023-09-05 05:56:12

前言：生命周期的重要性

Vue 的生命周期，如同生物体的生命历程，它定义了组件从创建到销毁的不同阶段，并在每个阶段执行特定的钩子函数。这些函数就像控制点，开发者可以通过它们在特定时间插入自定义逻辑，实现各种功能。掌握 Vue 生命周期，是理解和驾驭 Vue 框架的关键。

生命周期阶段及其钩子函数

Vue 生命周期主要分为以下几个阶段，每个阶段都有相应的钩子函数：

1. 创建阶段

beforeCreate：在实例初始化后立即调用，此时 DOM 元素还未创建。
created：在实例创建完成后调用，此时 DOM 元素已经创建，但还未挂载到页面上。

2. 挂载阶段

beforeMount：在组件挂载到 DOM 之前调用。
mounted：在组件挂载到 DOM 之后调用，此时组件已经完全初始化。

3. 更新阶段

beforeUpdate：在组件更新前调用，此时 DOM 还没有更新。
updated：在组件更新后调用，此时 DOM 已更新。

4. 销毁阶段

beforeDestroy：在组件销毁前调用，此时 DOM 还没有销毁。
destroyed：在组件销毁后调用，此时 DOM 已销毁，所有事件监听器和子组件都已被移除。

钩子函数的用途和最佳实践

每个钩子函数都有特定的用途，并遵循最佳实践：

beforeCreate ：用于初始化数据或执行与实例化相关的逻辑。
created ：用于执行与数据获取或状态管理相关的任务。
beforeMount ：用于在挂载组件之前对 DOM 进行操作。
mounted ：用于在组件挂载之后进行 DOM 操作或与外部服务通信。
beforeUpdate ：用于在组件更新之前执行计算或准备新的状态。
updated ：用于在组件更新之后进行 DOM 操作或与外部服务通信。
beforeDestroy ：用于在组件销毁之前执行清理工作，例如移除事件监听器或取消网络请求。
destroyed ：用于在组件销毁之后执行最终清理工作。

实例和代码示例

为了更好地理解 Vue 生命周期和钩子函数，这里提供一个简单的示例：

// 组件代码
import { defineComponent, ref } from 'vue'

export default defineComponent({
  // 生命周期钩子函数
  beforeCreate() {
    console.log('组件创建之前')
  },
  created() {
    console.log('组件已创建')
  },
  beforeMount() {
    console.log('组件挂载之前')
  },
  mounted() {
    console.log('组件已挂载')
  },
  beforeUpdate() {
    console.log('组件更新之前')
  },
  updated() {
    console.log('组件已更新')
  },
  beforeDestroy() {
    console.log('组件销毁之前')
  },
  destroyed() {
    console.log('组件已销毁')
  },
  setup() {
    const count = ref(0)

    return {
      count,
    }
  },
  template: `
    <div>
      <button @click="increment">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `,
  methods: {
    increment() {
      this.count++
    },
  },
})

// 应用代码
import { createApp } from 'vue'

const app = createApp({
  components: {
    MyComponent,
  },
  template: `
    <div>
      <my-component></my-component>
    </div>
  `,
})

app.mount('#app')