vue2/3生命周期使用建议

Vue 的生命周期是指一个 Vue 组件从创建到销毁的整个过程。理解并合理使用这些生命周期钩子函数，可以帮助你在合适的时机执行初始化、数据获取、DOM 操作、清理等任务。

---

一、Vue 生命周期概述

Vue 2.x 和 Vue 3.x（Composition API）生命周期大致相同，但写法略有不同：

阶段	描述
beforeCreate / onBeforeMount	实例刚被创建，属性和方法还未初始化
created / onMounted	实例已经创建，属性已绑定，但 DOM 还未生成
beforeMount / onBeforeMount	模板编译/挂载之前
mounted / onMounted	模板编译/挂载之后，此时可以访问 DOM
beforeUpdate / onBeforeUpdate	数据更新前调用，此时视图尚未更新
updated / onUpdated	数据更新后调用，视图也已更新
beforeUnmount / onBeforeUnmount	组件销毁前调用，用于清理事件、定时器等
unmounted / onUnmounted	组件销毁后调用

---

二、生命周期使用建议与最佳实践

1. created / onMounted：数据初始化、接口请求

推荐使用：

• 在 created 或 onMounted 中进行数据初始化、接口请求。
• 若需要操作 DOM，则建议在 mounted 中执行。

// Vue 2 Options API
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      const res = await fetch('/api/users');
      this.users = await res.json();
    }
  }
}

// Vue 3 Composition API
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(async () => {
      const res = await fetch('/api/users');
      // 处理数据...
    });
  }
}

⚠️ 注意：避免在 created 中操作 DOM，因为此时 DOM 尚未渲染。

---

2. mounted / onMounted：DOM 操作、第三方库初始化

推荐使用：

• 初始化第三方组件（如 ECharts、地图、滑动插件等）
• 获取真实 DOM 节点信息（如高度、宽度）

mounted() {
  this.$nextTick(() => {
    this.initChart();
  });
}

onMounted(() => {
  initChart(); // 假设是 ECharts 初始化
});

⚠️ 注意：如果数据异步加载完成后再渲染 DOM，建议在 watch 或 watchEffect 中处理 DOM 操作。

---

3. beforeUpdate / onBeforeUpdate：响应数据变化前

推荐使用：

• 在数据变更前做一些准备工作（比如记录旧值）

onBeforeUpdate(() => {
  console.log('数据即将更新');
});

---

4. updated / onUpdated：响应数据变化后

推荐使用：

• 数据更新后重新计算布局或重新渲染某些动态内容
• 不要频繁触发更新逻辑，避免死循环

onUpdated(() => {
  console.log('数据已更新，可重新渲染视图');
});

⚠️ 注意：不要在 updated 中修改响应式数据，否则会再次触发更新，导致无限循环。

---

5. beforeUnmount / onBeforeUnmount：组件销毁前的清理工作

推荐使用：

• 清除定时器、事件监听器、取消订阅
• 手动释放内存资源

onBeforeUnmount(() => {
  clearInterval(timer);
  window.removeEventListener('resize', handleResize);
});

---

6. activated / deactivated（仅限 keep-alive 缓存组件）

推荐使用：

• 当组件被 <keep-alive> 缓存时，这两个钩子用于控制激活/失活状态

activated() {
  console.log('组件被激活');
},
deactivated() {
  console.log('组件被缓存');
}

---

三、Vue 2 与 Vue 3 生命周期对比表

Vue 2 (Options API)	Vue 3 (Composition API)	说明
beforeCreate	—	自动调用，不推荐手动使用
created	—	数据初始化完成
beforeMount	onBeforeMount	挂载前
mounted	onMounted	挂载完成，可操作 DOM
beforeUpdate	onBeforeUpdate	数据更新前
updated	onUpdated	数据更新后
beforeUnmount	onBeforeUnmount	销毁前
unmounted	onUnmounted	销毁后
activated	onActivated	<keep-alive> 激活
deactivated	onDeactivated	<keep-alive> 失活

---

四、常见问题 & 使用建议

场景	建议生命周期
请求数据	created 或 onMounted
初始化第三方组件	mounted 或 onMounted
监听窗口大小变化	mounted 添加监听，beforeUnmount 移除监听
表单验证初始化	mounted
定时器管理	mounted 启动，beforeUnmount 清除
动态样式设置	mounted 或 updated
组件销毁前清理	beforeUnmount
缓存组件状态	activated / deactivated

---

五、示例代码汇总（Vue 3 Composition API）

import { onMounted, onUpdated, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let timer = null;

    onMounted(() => {
      console.log('组件挂载完成');
      timer = setInterval(() => {
        console.log('定时器运行中...');
      }, 1000);
    });

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

    onBeforeUnmount(() => {
      console.log('组件即将销毁');
      clearInterval(timer);
    });
  }
}