Vue实例生命周期函数（钩子函数）详解

妖狐艹你老母 2023-07-04 14:10 26阅读 0赞

## 一、钩子函数 ##

在了解vue生命周期函数之前，我们先看看啥叫"钩子函数"？百度一下是这样一段官方解释：“钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。”  
简单理解，就是**一些在系统消息触发时被系统自动调用的函数，像一个"钩子"，将我们想要处理系统消息的内容挂上。** Vue生命周期函数就是常见的钩子函数之一。

## 二、vue生命周期 ##

**- 展示**  
先看看官方图示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]  
**- 分析**  
1.beforeCreate和created函数  
![在这里插入图片描述][20200211201330685.png]从官方图可知，vue实例创建后需要进行事件、周期初始化，然后开始元素属性等注入。这个过程我们通过在控制台输出做比较：在注入前(beforeCreate())各属性undefined；注入后(created())各属性进行绑定已经呈现出来。ps：此时el仍然未挂载，继续分析。

2.beforeMount和mounted生命周期  
![在这里插入图片描述][20200211204309324.png]创建完成后开始判断是否有指定"el"元素，如果有继续下一步，没有则等待调用$mount(el)函数。继续判断是否有指定"template"元素，如果有则按模版渲染，没有则按照外层HTML.DOM结构。挂载前(beforeMount())将前面指定好的vm.$el渲染完成；挂载后(mounted())已将vm.$el挂载到实例上。

3.beforeUpdate和updated生命周期  
![在这里插入图片描述][20200211213348477.png]数据更新(update)是个快速的过程，通过控制台输出不难看出，当data中message属性的值更改时，虚拟DOM进行重新渲染，触发更新前(beforeUpdate())和更新后(updated())两个生命周期函数。

4.beforeDestroy和destroyed生命周期  
![在这里插入图片描述][20200211222226653.png]vm.$destroy()是vue内部函数，执行对组件、监听器、实例的解绑，销毁现有DOM结构，恢复原生DOM。这里通过从控制台执行$destroy()触发销毁前(beforeDestroy())和销毁后(destroyed())两个生命周期函数。

至此，一个vue实例的生命周期圆满。实战中可运用这些钩子函数在vue程序各系统阶段进行程序应用或处理系统消息。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200211194318697.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0,size_16,color_FFFFFF,t_70
[20200211201330685.png]: https://img-blog.csdnimg.cn/20200211201330685.png
[20200211204309324.png]: https://img-blog.csdnimg.cn/20200211204309324.png
[20200211213348477.png]: https://img-blog.csdnimg.cn/20200211213348477.png
[20200211222226653.png]: https://img-blog.csdnimg.cn/20200211222226653.png