vue2生命周期详解

1、什么是 Vue 生命周期

        Vue 生命周期（Lifecycle）是指 ​Vue 实例或组件从创建到销毁的整个过程，在这个过程中，Vue 会自动运行一些特定的函数，这些函数被称为 ​生命周期钩子（Lifecycle Hooks）​​ 或 ​生命周期函数。

        可以把这些钩子函数理解为 Vue 实例在不同阶段提供的“回调函数”​，你可以在这些阶段插入自己的代码逻辑，比如：

• 数据初始化
• 发送网络请求
• 操作 DOM
• 清理定时器、取消事件监听等

2、Vue 2 生命周期流程图

        下面是 Vue 2 生命周期的主要阶段和钩子函数，按执行顺序排列：

        1 、创建阶段（Initialization）​       

                beforeCreate

                created

   2、​挂载阶段（DOM Insertion）​

                beforeMount

                mounted

        3、​更新阶段（Re-render / Data Change）​

                beforeUpdate

                updated

        4、销毁阶段（Teardown）

                beforeDestroy

                destroyed

注意：Vue 3 中生命周期钩子函数有所变化（比如 beforeDestroy 改为 beforeUnmount）

3、Vue 2 生命周期钩子函数详解

1、创建阶段

        1、beforeCreate

• ​时机​：实例刚被创建，​数据观测 (data observer) 和事件/侦听器还未初始化​
• ​特点​：
  • 不能访问 data 中的数据
  • 不能访问 methods 中的方法
  • 不能访问 DOM
• ​用途​：一般很少使用

  beforeCreate() {console.log('beforeCreate:', this.message) // undefined
  }

  2、created

• 时机​：实例已经创建完成，​数据观测已完成，属性和方法已设置，但 DOM 还未生成，$el 还不可用​
• ​特点​：
  • 可以访问 data 中的数据
  • 可以调用 methods 中的方法
  • ​不能访问 DOM（this.$el 为 undefined）​​
• ​用途​：
  • 初始化数据
  • ​发送异步请求获取数据（如调用 API）​​
  • 执行一些不需要 DOM 的初始化逻辑

    created() {console.log('created:', this.message) // 可访问 data// 推荐在这里发起异步请求，此时 data 已初始化，DOM 还未渲染axios.get('/api/user').then(res => {this.user = res.data})
    }

        3、beforeMount

• 时机​：在挂载开始之前被调用，相关的 ​render 函数首次被调用，但 DOM 还未渲染到页面上​
• ​特点​：
  • 模板已经编译完成
  • 但还没有挂载到页面上，this.$el 还不可见
• ​用途​：很少使用

        4、mounted

• 时机​：​实例已经挂载到 DOM 上，可以访问 this.$el，DOM 已经渲染完成​
• ​特点​：
  • 可以操作 DOM（比如初始化第三方库：图表、轮播图等）
  • 可以访问 this.$refs
  • 也可以调用请求后台接口的方法
• ​用途​：
  • 操作 DOM
  • 初始化需要 DOM 的插件（如 ECharts、Swiper）
  • 执行依赖于 DOM 的代码

    mounted() {console.log('DOM 已挂载', this.$el)// 可以安全地操作 DOM 或调用第三方库// 比如初始化 ECharts 图表const chart = echarts.init(this.$refs.chartDom)chart.setOption({...})
    }

       

2、更新阶段（当数据变化时触发）

        5、beforeUpdate   

• 时机​：数据发生变化，​虚拟 DOM 重新渲染​ ​之前​
• ​特点​：
  • 可以获取更新前的 DOM 状态
  • 但此时视图还未更新
• ​用途​：一般较少使用，可用于某些特殊 DOM 操作

        6、 updated

• 时机​：由于数据更改导致的 ​虚拟 DOM 重新渲染和打补丁之后​
• ​特点​：
  • 组件 DOM 已经更新
  • 可以操作更新后的 DOM
• ​用途​：
  • 操作更新后的 DOM（但要避免无限循环）
  • 注意：​不要在此钩子中修改数据，可能会导致无限循环更新

3、销毁阶段（组件销毁时）

        7、beforeDestroy （常用）

• ​时机​：​实例销毁之前调用​
• ​特点​：
  • 实例仍然完全可用
  • ​适合做清理工作​
• ​用途​：
  • 清除定时器
  • 移除事件监听
  • 取消网络请求
  • 销毁第三方库实例

    data() {return {timer: null}
    },created() {this.timer = setInterval(() => {console.log('定时运行中...')}, 1000)
    },beforeDestroy() {console.log('组件即将销毁')clearInterval(this.timer)  // 避免内存泄漏
    }

        8、destroyed

• 时机​：​实例销毁后调用​
• ​特点​：
  • 所有的子组件也都被销毁
  • 组件已经从 DOM 中移除，所有绑定的事件、监听器都已被移除
• ​用途​：收尾工作（一般较少使用）

4、钩子函数总结

钩子函数	时机说明	是否可访问 data/methods	是否可访问 DOM	常见用途
beforeCreate	实例刚初始化，data 和 methods 还未初始化	❌	❌	极少使用
created	实例已创建，data 和 methods 可用，但 DOM 未生成	✅	❌	初始化数据、发请求
beforeMount	模板已编译，但尚未挂载到页面上	✅	❌	很少使用
mounted	实例已挂载到真实 DOM，可以操作 DOM	✅	✅	操作 DOM、初始化插件
beforeUpdate	数据变化，虚拟 DOM 重新渲染之前​	✅	❌（旧DOM）	极少使用
updated	数据变化导致 DOM 重新渲染之后​	✅	✅（新DOM）	操作更新后的 DOM
beforeDestroy	组件销毁前，实例仍可用，适合做清理工作	✅	✅	清理定时器、事件、请求
destroyed	组件已销毁，所有子组件也被销毁	❌	❌	收尾工作

5、Vue 2 生命周期钩子函数与 Vue 3 对比

Vue 2	Vue 3（Composition API）对应
beforeCreate	setup() 开始之前
created	setup() 中
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

注意：如果使用 Vue 3，生命周期钩子函数是通过 onXxx 形式使用，在 setup() 函数中导入调用。