23 组件基础之组件的生命周期

在构建 Vue 应用时，理解组件的生命周期至关重要。每个 Vue 组件都经历一系列的生命周期钩子（Lifecycle Hooks），这些钩子可以让我们在特定的时刻插入自定义代码。本文将详细介绍组件的生命周期及其常用钩子。

生命周期图示

在深入学习各个生命周期钩子之前，先来看看组件的生命周期流程图：

创建阶段
┌────────────────────────┐
│  beforeCreate          │
│  created               │
└────────────────────────┘
        │
        ▼
挂载阶段
┌────────────────────────┐
│  beforeMount           │
│  mounted               │
└────────────────────────┘
        │
        ▼
更新阶段
┌────────────────────────┐
│  beforeUpdate          │
│  updated               │
└────────────────────────┘
        │
        ▼
卸载阶段
┌────────────────────────┐
│  beforeDestroy         │
│  destroyed             │
└────────────────────────┘

生命周期钩子详解

1. 创建阶段

在组件被创建时，会依次调用以下两个钩子：

• beforeCreate: 在组件实例刚被创建时调用，此时 data、computed 等属性尚未被初始化。我们通常无法访问到 this。

• created: 组件实例已经创建完成，数据已经设置完成，可以访问 data 和 computed。但此时 DOM 还没有生成，因此无法操作 DOM。

代码示例

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('组件即将被创建');
  },
  created() {
    console.log('组件已创建，message:', this.message);
  }
});

2. 挂载阶段

在组件被挂载到 DOM 上时，将会调用以下钩子：

• beforeMount: 在挂载开始之前被调用，相关的 DOM 尚未生成。

• mounted: 组件已被挂载，DOM 已经生成。此时可以进行 DOM 操作、发起网络请求等。

代码示例

Vue.component('mounted-example', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: '组件已挂载'
    };
  },
  beforeMount() {
    console.log('组件即将挂载');
  },
  mounted() {
    console.log('组件已挂载到 DOM 上');
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟网络请求
      setTimeout(() => {
        this.message = '数据加载完成';
      }, 2000);
    }
  }
});

3. 更新阶段

在组件数据变化后，组件将更新并进入以下两个钩子：

• beforeUpdate: 更新发生之前调用，数据更改但尚未更新 DOM。

• updated: 数据已更新，DOM 也已更新，您可以在这里进行 DOM 相关操作。

代码示例

Vue.component('update-example', {
  data() {
    return {
      count: 0
    };
  },
  beforeUpdate() {
    console.log('组件即将更新，当前 count:', this.count);
  },
  updated() {
    console.log('组件已更新，当前 count:', this.count);
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
  methods: {
    increment() {
      this.count++;
    }
  }
});

4. 卸载阶段

当组件被销毁时，将调用以下钩子：

• beforeDestroy: 在组件实例销毁之前调用，一般可以进行一些清理工作。

• destroyed: 组件实例已销毁，此时事件监听和定时器会被清除，您可以进行最后的清理工作。

代码示例

Vue.component('destroy-example', {
  data() {
    return {
      message: 'Hello, I will be destroyed soon!'
    };
  },
  beforeDestroy() {
    console.log('组件即将被销毁');
  },
  destroyed() {
    console.log('组件已被销毁');
  },
  template: '<div>{{ message }}</div>'
});

小结

组件的生命周期钩子为我们在应用中提供了丰富的操作时机。利用这些钩子，我们可以在组件的不同阶段执行逻辑，比如初始化数据、处理 DOM 操作、发起网络请求以及清理资源等等。在实际开发中，合理使用这些生命周期钩子可以有效提升组件的性能与可维护性。

在下一篇中，我们将探讨组件间的通信，尤其是父子组件之间的传值机制。敬请期待！