vue的生命周期(钩子函数)——应用场景

一、什么是生命周期

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

2.自己理解

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

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

 

 

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 销毁之后');

            },

三、执行结果

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

 

发布了150 篇原创文章 · 获赞 87 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/yyp0304Devin/article/details/105544527
今日推荐