1、生命周期图示
参考官网页面：Vue生命周期图示
2、Vue 的生命周期包括四个状态（记住这四个）
1、creating 状态 —-vue 实例被创建的过程
2、mounting 状态 —-挂到到真实的 DOM 节点，渲染出html页面
3、updating 状态 —-如果 data 中的数据改变就会触发对应组件的重新渲染
4、destroying 状态 —-实例销毁
3、四个状态对应 8 个方法
beforeCreate —-el选项 和 data 并未初始化，el、data都还是 undefined
created —-实例创建成功，完成了 data 数据的初始化，el选项还是是undefined，data已经定义，这里可以调用接口请求数据，为挂载到el选项对应的dom做准备
beforeMount —-完成了 el 初始化，date数据还未挂载到el选项对应的dom
mounted —-date数据挂载到el选项对应的dom，模版中的 data 数据直接显示出来了，完成挂载
beforeUpdate —-当 data 数据发生变化调用，发生在对应组件的重新渲染之前
updated —-触发对应组件的重新渲染
beforeDestroy —-在 vue 实例销毁之前调用，此时实例仍然可用
destroyed —-在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
4、代码解读
1、直接新建html文件，复制下面代码；
2、F12查看Console;
3、输入：app.message= ‘this is update！！！！’;
4、输入：app.$destroy() //实例销毁
<!DOCTYPE html>
<html>
<head>
<title>vue生命周期</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "hello world"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态*********************》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
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)
}
})
</script>
</body>
</html>