VUE的生命周期探索：理解组件的成长旅程

前端

2023-12-06 16:52:14

Vue 生命周期：掌控组件的诞生、成长和消亡

在 Vue 的世界里，每个组件都有自己独特的人生旅程，从创建到销毁。这就是所谓的 生命周期 。理解 Vue 生命周期至关重要，因为它能让你控制组件在不同阶段的行为，从而构建出健壮而高效的应用程序。

生命周期的阶段

Vue 生命周期可以分为五个阶段：

创建阶段： 组件被初始化，数据和方法被创建。
安装阶段： 组件被挂载到其父组件，子组件被创建。
挂载阶段： 组件被渲染到 DOM 上，可以与用户交互。
更新阶段： 当组件的数据发生变化时，组件会重新渲染。
销毁阶段： 组件从 DOM 上移除，事件监听器被解绑，资源被释放。

生命周期钩子函数

为了让你在生命周期的关键时刻插入代码，Vue 提供了 钩子函数 。这些函数是你可以用来执行自定义逻辑的地方。

created： 在创建阶段调用。
mounted： 在挂载阶段调用。
updated： 在更新阶段调用。
destroyed： 在销毁阶段调用。

妙用钩子函数

Vue 生命周期钩子函数有广泛的用途，包括：

数据初始化： 在 created 中初始化组件数据。
DOM 操作： 在 mounted 中进行 DOM 操作，例如添加事件监听器。
网络请求： 在 mounted 中发起网络请求。
组件通信： 在 updated 中使用事件总线进行组件通信。
资源释放： 在 destroyed 中释放组件占用的内存和其他资源。

代码示例

export default {
  created() {
    // 初始化数据
    this.count = 0;
  },
  mounted() {
    // DOM 操作
    this.$refs.button.addEventListener('click', this.increment);
  },
  updated() {
    // 组件通信
    this.$emit('count-changed', this.count);
  },
  destroyed() {
    // 资源释放
    this.$refs.button.removeEventListener('click', this.increment);
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};