vue生命周期钩子=生命周期函数=生命周期事件

墨蓝 2023-10-06 17:46 97阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

## 特点 ##

1、生命周期函数:在某个时刻会自动执行的函数  
2、不能使用箭头函数

## 生命周期函数分类 ##

### 一、创建期间的生命周期函数 ###

#### beforeCreate ####

实例创建完成之前，即刚刚创建出来，但还没有完成；  
此时，data和methods属性还没有初始化好

#### created ####

实例创建完成，  
data和methods属性创建完成，所以要调用methods中的方法，或data中的数据，最早只能再created中进行  
此时还没有开始编译模板

#### beforeMount ####

模板编译已经完成，但是还没有挂载到页面，所以页面还是旧的

#### mounted ####

模板已经渲染到页面，进入运行阶段  
可以操作页面上的DOM节点

### 二、运行阶段的生命周期函数 ###

#### beforeUpdate ####

data中的数据已经更新，但页面还没有更新  
此时还没有开始重新渲染DOM节点

#### updated ####

data中的数据已经更新，重新渲染DOM节点，页面也更新

### 三、销毁期间的生命函数 ###

#### beforeDestroy ####

实例销毁前

#### destroyed ####

实例已经销毁后执行

### 新增 ###

#### activated组件激活时触发 ####

#### deactivated组件失活时触发 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]

#### errorCaptured 2.5.0+ 新增 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210523224046107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/27e5d641d7024b84934a1a0c2043daa4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16