【Vue2 ✨】Vue2 入门之旅（四）：生命周期钩子

前三篇我们学习了 Vue 的基础、模板语法和数据相关知识。本篇将介绍 Vue2 的 生命周期钩子，理解组件从“出生”到“销毁”的全过程。

目录

1. 什么是生命周期
2. 生命周期流程图
3. 常见生命周期钩子
   • beforeCreate
   • created
   • beforeMount
   • mounted
   • beforeUpdate
   • updated
   • beforeDestroy
   • destroyed
4. 使用场景
5. 小结

什么是生命周期

Vue 实例从创建到销毁，会经历一系列过程：

• 初始化数据
• 挂载 DOM
• 更新数据
• 卸载组件

在这些关键时刻，Vue 会触发 生命周期钩子函数，让开发者在合适的时机执行逻辑。

生命周期流程图

Vue2 生命周期大致流程如下：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

常见生命周期钩子

beforeCreate

组件实例刚创建，还没有 data 和 methods。
适合做一些低级初始化。

beforeCreate() {
  console.log('组件刚创建，还没有数据')
}

created

实例已经创建好，data 已经初始化完成。
可以进行 数据请求、定时器设置等。

created() {
  console.log('组件创建完成，可以访问 data:', this.title)
  // this.fetchData()
}

beforeMount

模板编译完成，但尚未挂载到 DOM。

beforeMount() {
  console.log('模板已编译，但还没挂载到页面')
}

mounted

组件挂载完成，可以操作 DOM。

mounted() {
  console.log('组件挂载完成，可以操作 DOM')
  const el = this.$el.querySelector('p')
  console.log(el.innerText)
}

beforeUpdate

数据即将更新，界面还没刷新。

beforeUpdate() {
  console.log('数据即将更新')
}

updated

数据更新完成，界面已重新渲染。

updated() {
  console.log('页面更新完成')
}

beforeDestroy

实例即将销毁。
适合清除定时器、解绑事件。

beforeDestroy() {
  console.log('组件即将销毁')
  clearInterval(this.timer)
}

destroyed

实例销毁完成，所有绑定解除。

destroyed() {
  console.log('组件已销毁')
}

使用场景

• created：发送请求、初始化数据
• mounted：操作 DOM、第三方库初始化
• beforeDestroy：资源回收，清除定时器、事件解绑

小结

1. Vue 生命周期包含 创建 → 挂载 → 更新 → 销毁 四个阶段。
2. 常见钩子：
   • created：数据就绪，可以发请求
   • mounted：DOM 已挂载，可以操作界面
   • beforeDestroy：做清理工作
3. 正确利用生命周期钩子，可以让代码更加清晰、职责分明。

📚 下一篇文章，我们将学习 组件化开发，深入理解 Vue 的模块化思想。