Vue全局API
Vue生命周期
Vue的生命周期一共由10个：
- beforeCreate-----初始化之前
- created-----创建完成
- beforeMount-----挂载之前
- mounted-----挂载完成
- beforeUpdate-----更新之前
- updated-----更新完成
- activated-----创建活动完成
- deactivated-----销毁活动
- beforeDestroy-----销毁之前
- destroyed-----销毁完成
可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容
注意：
可以调用vue的对象对其进行销毁，app.$destroy()
下面这个例子可以详细的查看Vue的生命周期（也可以称为钩子函数）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue生命周期</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>总分：{{count}}</p>
<button @click="add">add</button>
</div>
<p><button onclick="demo.$destroy()">销毁</button></p>
<script type="text/javascript">
var demo=new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function(){
this.count++;
}
},
beforeCreate:function(){
console.log("1.beforeCreate----在创建之前")
},
created:function(){
console.log("2.created----创建已经完成")
},
beforeMount:function(){
console.log("3.beforeMount----在挂载之前")
},
mounted:function(){
console.log("4.mounted----挂载完成")
},
beforeUpdate:function(){
console.log("5.beforeUpdate----在更新之前")
},
updated:function(){
console.log("6.updated----挂载完成")
},
activated:function(){
console.log("7.activated----")
},
deactivated:function(){
console.log("8.deactivated----")
},
beforeDestroy:function(){
console.log("9.beforeDestroy----销毁之前")
},
destroyed:function(){
console.log("10.destroyed----销毁完成")
}
})
</script>
</body>
</html>
运行结果：
在页面加载完成时，Vue的前四个生命周期已经启动
在点击”add“按钮之后，Vue的第5，6个生命周期就开始运行
在点击”销毁“按钮之后，vue的第9，10个生命周期就开始运行
