Vue生命周期

161 阅读2分钟

生命周期

生命周期的意义

生命周期 => 一个事物从出生 到 消亡的全部过程

生命周期(Life Cycle)是指一个组件从创建-> 运行 -> 销毁的整个阶段,强调的是一个时间段

  • 人出生,表示这个人生命周期的开始
  • 人离世,表示这个人生命周期的结束
  • 中间人的一生,就是这个人的生命周期

我们可以把每个 vue 组件运行的过程,也概括为生命周期:

  • vue 组件的初始化,表示生命周期的开始
  • vue 组件的销毁,表示生命周期的结束
  • vue 组件中间运行的过程,就是组件的生命周期

image.png

生命周期函数(钩子函数)

生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。

例如,组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据。

组件生命周期分类

vue 组件的生命周期函数,可以分为 3 大类:

  • 组件初始化阶段的生命周期函数
  • 组件运行阶段的生命周期函数
  • 组件销毁阶段的生命周期函数
1. beforeCreate:data数据初始化之前,组件还没有数据
2. created: data数据初始化之后,可以获取到组件的数据
3. beforeMount:DOM渲染之前,DOM还没渲染
4. mounted:DOM渲染之后,可以操作DOM了
5. beforeUpdate: 数据更新,DOM更新前
6. updated: 数据更新,DOM更新后
7. beforeDestroy: 组件销毁前
8. destroyed: 组件销毁后

生命周期-图解

image.png