Vue实例的生命周期函数主要可以分为以下三个部分:
创建期间、运行期间以及销毁期间的生命周期函数
创建期间的生命周期函数如下:
beforeCreate:beforeCreate函数在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。 created:created函数表示vue实例已经在内存中创建完成,并且数据data 和方法methods 也已经创建完成,但是还没有开始编译模板; beforeMount:beforeMount函数表示此时已经完成了模板的编译,但是还没有挂载到页面中; mounted:mounted函数表示已经将编译好的模板,挂载到了页面指定的容器中显示;
运行期间的生命周期函数如下:
beforeUpdate:beforeUpdate函数表示状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点; updated:updated函数表示vue实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了;
销毁期间的生命周期函数:
beforeDestroy:beforeDestroy函数表示在vue实例销毁之前调用。这个时候,实例仍然完全可用;
destroyed:destroyed函数在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等 activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在