vue生命周期的含义,vue各个生命周期
本文介绍了Vue中的生命周期，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
什么是vue的生命周期
Vue中的生命周期是指组件从创建到销毁的一系列过程。看下面这张公文图：
从图中可以看出，Vue的整个生命周期包括八种状态，分别是：
becreatecreatedbeforemounmountedbeforeupdatedbeforedestroydestroyedvue组件的生命周期分为三个阶段，如下图所示：
创建阶段和销毁阶段在组件的生命周期中只执行一次，而更新阶段则执行多次。
让我们来看看在创建阶段已经完成了什么：
看看在更新阶段完成的事情：
最后，看一下销毁阶段的成果：
先看下面的代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题生命周期/标题
！-介绍vue.js -
脚本src=。/js/vue.js /script
脚本
window.onload=function(){
新Vue({
El:#app ，//2.0不允许挂载在html，body元素上。
数据：{
味精：“欢迎”
},
方法：{
update(){
This.msg= Welcome
},
destroy(){
这个。$ destroy()；
}
},
//未初始化创建前的状态E1和数据
创建之前(){
console . group(-)；
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.msg )
Console.log(刚刚创建了组件实例，但是还没有进行数据观察和事件配置)；
},
Created(){//常用的创建状态已经完成了数据的初始化。埃尔没有
console . group(-)；
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.msg )。//已经初始化
Console.log(实例已创建，数据观察和事件配置已进行)
},
before(){//预挂载状态完成el和数据的初始化
this.msg= 112233
console . group(-)；
console.log(%c%s ， color:red ， el : (this。$ El))；//已经初始化
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；//已经初始化
console.log(%c%s ， color:red ， message: this.msg )。//已经初始化
Console.log(模板在编译前未装入)；
},
Mounted(){//挂载在通常的挂载结束状态下完成。
console . group(-已装入的结束状态-)；
console.log(%c%s ， color:red ， el : this。$ El)；//已经初始化
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；//已经初始化
console.log(%c%s ， color:red ， message: this.msg )。//已经初始化
Console.log(模板编译好之后，就已经挂载了，然后就会有一个渲染的页面，这样就可以看到数据在页面上的显示)
},
before(){//更新前的状态
console . group(-)；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console.log(%c%s ， color:red ， message: this.msg )。
},
Updated(){ //更新完成状态
console . group(-更新的更新完成状态-)；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console.log(%c%s ， color:red ， message: this.msg )。
},
BeforeDestroy(){ //销毁前的状态
console . group(-)；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console.log(%c%s ， color:red ， message: this.msg )。
},
Destroyed(){ //销毁完成状态
console . group(-)；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console . log(" % c % s "，" color:red "，" message: this.msg )
}
});
}
/脚本
/头
身体
div id=应用程序
输入类型=text v-model=msg /
Button @click=更新更新数据/button
Button @click=destroy 销毁组件/按钮
/div
/body
/html
在控制台的控制台中检查运行后的效果：
然后单击“更新数据”按钮，您将看到由输入更改绑定的数据：
更新数据之前：
更新数据后：
打印控制台上显示的信息：
最后，单击“销毁组件”按钮查看控制台上显示的打印信息：
这样，一个完整的Vue实例的生命周期就结束了。
注意：销毁Vue组件后，如果更新数据，将不会有响应，因为组件已经被销毁。
关于Vue生命周期的这篇文章到此结束。希望对大家的学习有帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。