vue的生命周期（钩子函数）——应用场景

港控/mmm° 2023-07-26 05:30 9阅读 0赞

# 一、什么是生命周期 #

生命周期（Life Cycle）的概念应用很广泛，特别是在[政治][Link 1]、[经济][Link 2]、[环境][Link 3]、[技术][Link 4]、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程。对于某个产品而言，就是从自然中来回到自然中去的全过程，也就是既包括制造产品所需要的原材料的[采集][Link 5]、加工等[生产过程][Link 6]，也包括产品贮存、运输等流通过程，还包括产品的使用过程以及产品报废或处置等废弃回到自然过程，这个过程构成了一个完整的产品的生命周期。

## 2.自己理解 ##

当第一眼看到生命周期这个词时很眼熟，所以也能理解它的大概意思，通俗来讲，就是应给事物从诞生到消亡的过程，我们见过最多的可能就是在软件工程里的，知道软件的生命周期是怎么样的。

所以在vue里也存在生命周期，在这个周期中包含了几个函数，这几个函数都在每个阶段有各自的功能。废话不多了，先来张图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容，

其实在vue的官方网有一张已经很好的诠释了生命周期

# 二、vue的生命周期（钩子函数） #

1.组件实例刚被创建，组件属性计算之前，如data属性等。

beforeCreate: function() {
    
             console.log('1-beforeCreate 初始化之前');
        },

2.组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在

created: function() {
    
                    console.log("2-created 创建完成");
    
                },

3.模板编译/挂载之前

beforeMount: function() {
    
                    console.log("3-beforeMount 挂载之前 ");
    
                },

4.模板编译/挂载之后

mounted: function() {
    
                    console.log("4 - mounted 被挂载之后 ");
    
                },

5.组件更新之前

beforeUpdate: function() {
    
                    console.log('5-beforeUpdate 数据更新之前');
    
                },

6.组件更新之后

update: function() {
    
                    console.log('6-update 被更新后');
    
                },

7.for keep-alive ,组件被激活时调用

activated: function() {
    
                    console.log('7-cativated');
    
                },

8.for keep-alive，组件被移除时调用

dactivated: function() {
    
                    console.log('8-deactivated');
    
                },

9.组件销毁前调用

beforeDestroy: function() {
    
                    console.log('9-beforeDstroy 销毁之前');
    
                },

10.组件销毁后调用

destroyed: function() {
    
                    console.log('10-destroyed 销毁之后');
    
                },

# 三、执行结果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1][]

第七个和第八个暂时还没用到，等用到的时候在总结吧。

[Link 1]: https://baike.baidu.com/item/%E6%94%BF%E6%B2%BB/169778
[Link 2]: https://baike.baidu.com/item/%E7%BB%8F%E6%B5%8E/403149
[Link 3]: https://baike.baidu.com/item/%E7%8E%AF%E5%A2%83/277567
[Link 4]: https://baike.baidu.com/item/%E6%8A%80%E6%9C%AF/832247
[Link 5]: https://baike.baidu.com/item/%E9%87%87%E9%9B%86/4843625
[Link 6]: https://baike.baidu.com/item/%E7%94%9F%E4%BA%A7%E8%BF%87%E7%A8%8B/10626316
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: /images/20230528/6f7859f24d204b0e8f4a2a765ecfe0e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1]: /images/20230528/b54031935cfe47dc85d6cc1b84a47364.png