一、Vue的生命周期
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会有钩子函数让我们做想实现的动作。
1.beforeCreate
beforeCreate是实例初始化之后，此时的数据以及时间配置都没有准备好。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
beforeCreate(){
console.log("即将创建");
console.log(this.$data);
console.log(this.$el);
}
})
</script>打印结果是：
即将创建
undefined
undefined2.created
created是创建完毕，此时的数据可以读取到，但是el还不存在。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
created(){
console.log("创建完毕");
console.log(this.$data);
console.log(this.$el);
}
})
</script>
打印结果是：
创建完毕
object{__ob__:Observe}
undefined3.beforeMount
beforeMount是即将挂载，此时的$el关联到指定的dom节点，但是{{name}}没有成功渲染成data中的值。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
beforeMount(){
console.log("即将挂载");
console.log(this.$el);
}
})
</script>
打印结果是：
即将挂载
<div id="app">{{name}}</div>4.mounted
mounted是挂载完毕，此时的数据成功渲染出来。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
mounted(){
console.log("挂载完毕");
console.log(this.$el);
}
})
</script>
打印结果是：
挂载完毕
<div id="app">Vue的学习</div>5.beforeUpdate
beforeUpdate是在检测到要修改数据的时候，更新渲染视图之前触发。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
beforeUpdate(){
console.log("即将更新渲染");
let name=this.$refs.app.innerHTML;
console.log('name:'+name);
}
})
</script>在控制台中修改data中的值：
app.name="Vue"打印结果是：
即将更新渲染
name: Vue的学习如上所示，在此阶段，视图并未重新渲染。
6.updated
updated是在检测到要修改数据的时候，更新渲染视图之前触发。
<div id="app">{{name}}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"Vue的学习"
},
updated(){
console.log("更新成功");
let name=this.$refs.app.innerHTML;
console.log('name:'+name);
}
})
</script>在控制台中修改data中的值：
app.name="Vue"打印结果是：
即将更新渲染
name:Vue的学习
更新成功
name: Vue如上所示，在此阶段，视图已经更新。
7.beforeDestroy
在调用实例的destroy()方法可以销毁当前的组件，在销毁前会触发beforeDestroy钩子。
8.destroyed
成功销毁后，会触发destroyed钩子，此时实例与其他实例的关联已经被清楚，与视图之间也不再绑定。
在销毁前通过控制台修改name，在销毁后再修改name
beforeDestroy(){
console.log("销毁之前");
},
destroyed(){
console.log("销毁之后")
}在控制台中修改data中的值：
app.name="更新"
app.$destory();
app.name="再一次更新"打印结果是：
"更新"(视图变化)
销毁之前，触发beforeDestroy
销毁之后，触发destroyed
undefined
"再一次更新"(视图不变化)
如上所示，在此阶段，销毁之前，修改name的值，可以成功修改视图显示的内容为：“更新”，但是实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，视图再也不会更新了，说明实例成功被销毁了。
9.actived
keep-alive组件被激活时调用
10.deactivated
keep-alive组件停用时调用
二、图示生命周期的八个阶段
created较为常用。
