vue生命周期
2017-09-18 本文已影响363人
swhzzz
每个vue实例在被创建之前都要经过初始化。例如观测数据，初始化事件，挂载Dom，同时data变化时，更新Dom，在这一系列过程中有着一些钩子，在完成某些特定的条件时，便会触发，我们称它为钩子函数。一个实例从创建到销毁的过程则称之为实例的生命周期。
来看一张vue生命周期的图解
生命周期图解
下面介绍一下vue的钩子函数：
- beforeCreate
beforeCreate发生在new Vue()之后，但在还没有观测数据之前调用 - created
在观测数据以及vue内部初始化事件后调用created钩子 - beforeMount
开始挂载钩子，但是还没有生成HTML到页面上，此时标签内任然是Mustach - mounted
挂载完成，html渲染到页面上，此时可以用axios发送一些ajax请求 - beforeUpdate
在数据更新之前调用的钩子 - updated
数据更新之后调用,之后多次更新数据任然会调用此钩子 - beforeDestroy
vue实例销毁前执行 - destroyed
vue实例销毁后执行，此后vue的watcher，组件，以及时间都被卸载，不能使用，但是data任然存在
最后理一遍思路，先new Vue()创建一个实例，调用beforeCreate钩子，观测数据，初始化事件，调用created钩子，判断el是否存在，若不存在则等到vm.mount(el)被调用才继续往下执行，若存在，则继续判断template是否存在，若template存在，则把data和template结合，但是不放到页面上，若不存在则使用el的outerHTML作为html，接着调用beforeMount钩子，此时，页面上任然是大胡子语法的标签，把结合的html放到页面上，调用mounted钩子。当数据发生变化时，先调用beforeUpdate钩子，虚拟Dom渲染数据，然后调用updated钩子。最后当destroy()被调用时，先执行beforedestroy钩子，然后卸载组件，事件，watcher，再调用destroyed钩子，至此就是一个完整的vue生命周期。
下面是一个vue生命周期的例子
<!DOCTYPE html>
<html>
<head>
<title></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: "monkeyWang is boy"
},
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>
