本文主要介绍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生命周期的详细解释和整合。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！