1.生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为八个阶段
分别有:
创建前/创建后
创建前:beforeCreate() 表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化
创建后:Created() 数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。
挂载前/挂载后
挂载前:beforeMount() vue 实例的 $el 和 data 都已初始化,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。
挂载后:Mounted() vue 实例挂载完成,data.message 成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,DOM 渲染在 mounted 中就已经完成了。
更新前/更新后
更新前:beforeUptate() 当 data 变化时,会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
更新后:Updated() 当 data 变化时,会触发 updated 方法。页面和 data 数据已经保持同步了。
销毁前/销毁后
销毁前:beforeDestroy() 组件销毁之前调用 ,在这一步,实例仍然完全可用。
销毁后:Destroyed() 组件销毁之后调用,对 data 的改变不会再触发周期函数,vue 实例已解除事件监听和 dom绑定,但 dom 结构依然存在。
beforeCreate: function ( ) {
console. group ( '------beforeCreate创建前状态------' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message)
} ,
created: function ( ) {
console. group ( '------created创建完毕状态------' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
beforeMount: function ( ) {
console. group ( '------beforeMount挂载前状态------' ) ;
console. log ( "%c%s" , "color:red" , "el : " + ( this . $el) ) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
mounted: function ( ) {
console. group ( '------mounted 挂载结束状态------' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
beforeUpdate: function ( ) {
console. group ( 'beforeUpdate 更新前状态===============》' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
updated: function ( ) {
console. group ( 'updated 更新完成状态===============》' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
beforeDestroy: function ( ) {
console. group ( 'beforeDestroy 销毁前状态===============》' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message) ;
} ,
destroyed: function ( ) {
console. group ( 'destroyed 销毁完成状态===============》' ) ;
console. log ( "%c%s" , "color:red" , "el : " + this . $el) ;
console. log ( this . $el) ;
console. log ( "%c%s" , "color:red" , "data : " + this . $data) ;
console. log ( "%c%s" , "color:red" , "message: " + this . message)
}