【Vue2 ✨】Vue2 入门之旅(四):生命周期钩子

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


目录

  1. 什么是生命周期
  2. 生命周期流程图
  3. 常见生命周期钩子
  4. 使用场景
  5. 小结

什么是生命周期

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

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

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


生命周期流程图

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

复制代码
beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

常见生命周期钩子

beforeCreate

组件实例刚创建,还没有 datamethods

适合做一些低级初始化。

js 复制代码
beforeCreate() {
  console.log('组件刚创建,还没有数据')
}

created

实例已经创建好,data 已经初始化完成。

可以进行 数据请求、定时器设置等。

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

beforeMount

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

js 复制代码
beforeMount() {
  console.log('模板已编译,但还没挂载到页面')
}

mounted

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

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

beforeUpdate

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

js 复制代码
beforeUpdate() {
  console.log('数据即将更新')
}

updated

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

js 复制代码
updated() {
  console.log('页面更新完成')
}

beforeDestroy

实例即将销毁。

适合清除定时器、解绑事件。

js 复制代码
beforeDestroy() {
  console.log('组件即将销毁')
  clearInterval(this.timer)
}

destroyed

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

js 复制代码
destroyed() {
  console.log('组件已销毁')
}

使用场景

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

小结

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

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

相关推荐
Swift社区8 小时前
GoLand IDE 无法识别 Go 工作区中的引用,如何解决?
开发语言·ide·golang
科大饭桶8 小时前
C++入门自学Day17-- 模版进阶知识
c语言·开发语言·c++·容器
91刘仁德8 小时前
c++ 类和对象(上)
开发语言·c++·经验分享·笔记·算法
海洋的渔夫11 小时前
1-ruby介绍、环境搭建、运行 hello world 程序
开发语言·后端·ruby
Small black human13 小时前
前端-什么是Vue
前端·javascript·vue.js
IT 前端 张13 小时前
Axios与Ajax:现代Web请求大比拼
前端·javascript·ajax
葵野寺14 小时前
【RelayMQ】基于 Java 实现轻量级消息队列(五)
java·开发语言·java-rabbitmq
AI 嗯啦15 小时前
Python 爬虫案例:爬取豆瓣电影 Top250 数据
开发语言·爬虫·python
1candobetter15 小时前
软考中级习题与解答——第二章_程序语言与语言处理程序(1)
开发语言