Vue生命周期

Vue 生命周期就是Vue 实例从创建 → 挂载 → 更新 → 销毁的整个过程，官方提供了 8 个生命周期钩子函数，让你能在不同阶段执行自己的代码。

---

一、8 个生命周期钩子（按执行顺序）

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

---

二、逐阶段解释（最实用）

1. 创建阶段（组件刚出生）

beforeCreate

• 实例刚被创建
• data、methods 还不能用
• 几乎不用

created

• data、methods 已经可以使用
• 但DOM 还没生成
• ✅ 常用：发送异步请求、获取初始数据

---

2. 挂载阶段（渲染到页面）

beforeMount

• 模板编译完成
• 但还没挂载到页面
• 几乎不用

mounted

• 组件已经挂载到页面，DOM 生成完成
• ✅ 最常用：操作 DOM、初始化插件、定时器、事件监听

---

3. 更新阶段（数据改变时）

beforeUpdate

• 数据已经改变
• 但DOM 还没重新渲染

updated

• 数据 + DOM 都已更新完成
• 可获取最新 DOM

---

4. 销毁阶段（组件消失）

beforeDestroy

• 组件即将销毁
• 实例还能用
• ✅ 常用：清除定时器、移除事件监听、防止内存泄漏

destroyed

• 组件完全销毁
• 所有绑定失效
• 一般不用

---

三、最常用的 3 个（90% 场景用这三个）

1. created：拿数据
2. mounted：操作 DOM
3. beforeDestroy：清理定时器 / 监听

---

四、Vue2 代码示例（直接复制可用）

vue

export default {
  data() {
    return {
      msg: "hello"
    }
  },
  
  // 1. 创建
  beforeCreate() {},
  created() {
    // 发请求拿数据 ✅
  },

  // 2. 挂载
  beforeMount() {},
  mounted() {
    // 操作DOM、初始化插件 ✅
  },

  // 3. 更新
  beforeUpdate() {},
  updated() {},

  // 4. 销毁
  beforeDestroy() {
    // 清除定时器、移除监听 ✅
  },
  destroyed() {}
}

---

五、Vue3 组合式 API（setup）

Vue3 setup 内部没有生命周期，需要用钩子函数：

js

import { onMounted, onUpdated, onUnmounted } from 'vue'

setup() {
  onMounted(() => {
    // 相当于 mounted
  })
  
  onUnmounted(() => {
    // 相当于 beforeDestroy
  })
}

---

总结

• 生命周期 = 组件从生到死的过程
• 8 个钩子，记住 created、mounted、beforeDestroy 就够用
• 作用：在合适的时机做合适的事（拿数据、操作 DOM、清理资源）