本文主要介绍Vue js的生命周期,通过示例代码非常详细的介绍,对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
有了Vue框架,熟悉它的生命周期可以让开发更好。
先看一下官网的示意图,上面详细给出了vue的生命周期:
它可以分为8个阶段:
之前(beforeCreate),
已创建(创建后),
装载前(装载前),
已安装(装载后),
之前(更新之前),
已更新(更新后),
在毁灭之前,
销毁(销毁后)
然后用一个例子的演示来演示具体的效果:
div id=app{{a}}/div
脚本
var myVue=new Vue({
埃尔:' #app ',
数据:{
答:“Vue.js”
},
创建之前:函数(){
Console.log('创建前')
console.log(this.a)
console.log(这个。$el)
},
已创建:函数(){
Console.log('创建后');
console.log(this.a)
console.log(这个。$el)
},
beforeMount:函数(){
Console.log('装载前')
console.log(this.a)
console.log(这个。$el)
},
已安装:函数(){
Console.log('装载后')
console.log(this.a)
console.log(这个。$el)
},
更新之前:函数(){
Console.log('更新前');
console.log(this.a)
console.log(这个。$el)
},
已更新:函数(){
Console.log('更新完成');
console . log(this . a);
console.log(这个。$el)
},
销毁前:函数(){
Console.log('销毁前');
console.log(this.a)
console.log(这个。$el)
console.log(这个。$el)
},
已销毁:函数(){
console . log(' destroyed ');
console.log(this.a)
console.log(这个。$el)
}
});
/脚本
运行后,检查控制台、
听听这个:
然后在方法中添加一个更改方法:
div id=app{{a}}
按钮v-on:click=' change ' change/按钮
/div
单击该按钮后出现的内容是:
这就是vue的生命周期。很简单。
以上是边肖对Vue js生命周期的详细解释和整合。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。