Vue的生命周期函数

快来打我* 2022-12-31 14:25 208阅读 0赞

## vue的生命周期以及生命周期函数 ##

简单可以理解为四个阶段

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]  
一个Vue实例被创建出来之后，会经过以下变化：

*  **第一阶段** ***beforeCreate*** 和 ***created*** 实例创建的生命周期  
    beforeCreate：  
    生命周期的开始，表示实例完全被创建出来之前会执行它，此时实例中的数据(data)和方法(methods)还未被初始化，还访问不到，不能对其进行操作。
    
    created：  
    此函数执行的时候，实例的数据(data)和方法(methods)已经被初始化成功，我们可以进行访问和操作。也是我们最早可以访问和操作的时间。
 *  **第二阶段** ***beforeMount*** 和 ***mounted*** 实例创建的生命周期  
    beforeMount：  
    此函数执行的时候， 表示模板已经在内存中渲染完成了，但是却并未把模板渲染进页面中。 此时的页面还是你写的模板语法。
    
    mounted：  
    此函数执行的时候，内存中渲染完成的模板已经对原始模板进行了替换，我们已经可以看到渲染好的页面了；  
    vue实例创建时的最后一个生命周期，此函数执行完，实例就已经完全 的被创建好了。
 *  **第三阶段** ***beforeUpdate*** 和 ***updated*** 实例运行中的生命周期
 *

beforeUpdate：  
当数据改变时会触发的函数，数据每改变一次，就会触发一次 ，但是此时页面还未和最新的数据保持同步，访问到的数据还是改变之前的数据。

updated：  
此函数执行时，说明页面和data中的数据已经保持同步了，数据也是最新的数据。  
e

*  **第四阶段** ***beforeDestroy*** 和 ***destroyed*** 销毁阶段  
    beforeDestroy：  
    当beforeDestroy执行时，函数已经从运行阶段要进入销毁阶段，但是不会有任何东西的销毁。  
    destroyed：  
    销毁执行完毕，所有东西都不可用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b84cf61d5c554cdda3b2ad285054b1ef.png