当前位置：首页 > VUE

vue生命周期实现

2026-01-23 10:01:35VUE

Vue 生命周期实现

Vue 的生命周期钩子是框架在组件创建、更新、销毁过程中自动调用的函数，开发者可以通过这些钩子在不同阶段执行自定义逻辑。以下是 Vue 生命周期的主要阶段及其实现方式：

生命周期钩子分类

创建阶段
- beforeCreate：实例初始化后，数据观测和事件配置之前调用。此时 data 和 methods 未初始化。
- created：实例创建完成，数据观测和事件配置已完成。可以访问 data 和 methods，但 DOM 未挂载。
挂载阶段
- beforeMount：模板编译完成，但尚未将 DOM 挂载到页面。
- mounted：DOM 挂载完成，可以操作 DOM 或发起异步请求。
更新阶段
- beforeUpdate：数据变化后，DOM 更新前触发。
- updated：DOM 更新完成后触发。
销毁阶段
- beforeDestroy：实例销毁前调用，适合清理定时器或解绑事件。
- destroyed：实例销毁后调用，所有子实例也会被销毁。

代码示例

export default {
  data() {
    return { message: 'Hello Vue!' };
  },
  beforeCreate() {
    console.log('beforeCreate: 数据未初始化');
  },
  created() {
    console.log('created: 数据已初始化', this.message);
  },
  beforeMount() {
    console.log('beforeMount: DOM 未挂载');
  },
  mounted() {
    console.log('mounted: DOM 已挂载');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  updated() {
    console.log('updated: DOM 更新后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
};

注意事项

避免在 beforeCreate 中访问 data 或 methods，此时它们尚未初始化。
mounted 不保证所有子组件都已挂载，如需等待子组件完成，可使用 this.$nextTick。
在 beforeDestroy 中清理定时器、事件监听等资源，防止内存泄漏。

组合式 API 中的生命周期

在 Vue 3 的组合式 API 中，生命周期钩子以函数形式调用，名称略有变化（如 onMounted）：

import { onMounted, onUpdated } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组合式 API 的 mounted');
    });
    onUpdated(() => {
      console.log('组合式 API 的 updated');
    });
  }
};