Vue生命周期 - 技术栈

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

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

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
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% 场景用这三个）

created：拿数据
mounted：操作 DOM
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 内部没有生命周期，需要用钩子函数：

复制代码

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

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

总结

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