一、生命周期:
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
而钩子函数,是生命周期事件的别名!
二、生命周期分类:
1、创建期间得生命周期函数:
beforeCreate();created();beforeMount();mounted();
2、运行期间的生命周期函数:
beforeUpdate();updated();
3、销毁期间的生命周期函数:
beforeDestory();destroyed();
三、图解
四、钩子函数:
1、beforeCreate()函数在“初始化事件”与“初始化方法"之间运行,是第一个生命周期函数,表示实例完全被创建出来之前,会执行它。此时data和methods中的数据还没有初始化。
2、created()函数,到这里,data和methods都已经被初始化好了。
3、beforeMount()函数,此时模板在仅在内存中编译完成,还是还未把模板渲染到我们所能看到的显示页面上,故页面显示依然尚未刷新。
4、mounted()函数,运行到这里,内存的模板便真实地挂载到页面上,我们也可以在页面看到渲染好的界面显示了。
当执行完此函数,实例便已经完全被创建好了。即将进入运行阶段。
5、beforeUpdate()函数,根据调用需要,执行0次或n次。此时的界面还没有被更新,数据依旧是旧数据,但是此时data数据是最新的。
6、updateed()函数,根据调用需要,执行0次或n次。当最新的内存DOM树被更新之后,会把内存的DOM树渲染到真实用户可见的页面上去,此时,就完成了数据从data到view页面的渲染。
此时从运行阶段,进入到销毁阶段
7、beforeDestroy()函数,实例身上的data以及methods等等,都处于可用状态,还未真正被销毁。
8、destroyed()函数,到这里,组件已经完全被销毁,包括数据,方法,等等。