vue的生命周期
vue实例从
创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。
beforeCreate:创建前
实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。
data() {
return {
num:1
}
}
beforeCreate(){
console.log(this.num); // undefined
},
created:创建后
实例已经创建完成之后被调用，完成了data 数据的初始化，但是$el没有
<span ref="span">{{num}}</span>
data() {
return {
num:1
}
},
created() {
console.log(this.num) // num
console.log(this.$refs.span) // undefined 访问不到dom节点
}
但是如果我们想在created里面获取到dom节点，该怎么办？
我们可以使用vue.js给我们提供的$nextTick方法：
created(){
this.$nextTick(()=>{
console.log(this.$refs.span);
})
console.log(this.$refs.span);
}
this.$nextTick(()=>{})将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
beforeMount:载入前
挂载之前调用，完成了el和data初始化,注意此时还不能访问dom节点
<span ref="span">{{num}}</span>
data() {
return {
num:1
}
},
beforeMount() {
console.log(this.num); // 1
console.log(this.$refs.span); // undefined
},
mounted:载入后
挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
<span ref="span">{{num}}</span>
data() {
return {
num:1
}
},
mounted(){
console.log(this.num); // 1
console.log(this.$refs.span); // <span>1</span>
}
beforeUpdate:更新前 / updated:更新后
beforeUpdate:在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
注意：一定是应用到页面中数据改变才会触发beforeUpdate和updated钩子函数
下面data中msg发生变化，但是页面中没有应用到它，所以不会触发两个钩子函数
<span ref="span">{{num}}</span>
<button @click="msg = 'uu'">改变msg</button>
data() {
return {
num:1,
msg:'你好'
}
},
beforeUpdate(){ // 不会触发
console.log(this.msg);
console.log(this.$refs.span);
},
updated() { // 不会触发
console.log(this.msg);
console.log(this.$refs.span);
},
beforeUpdate和updated区别：
<span ref="span">{{num}}</span>
<button @click="msg = 'uu'" class="button">改变{{msg}}</button>
data() {
return {
num:1,
msg:'你好'
}
},
指的是数据变了视图还未更新的时候会调用
beforeUpdate(){
console.log(this.msg);
let button = document.querySelector('.button')
console.log(button.innerHTML);
},
更新之后 数据和视图保持一致
updated() {
console.log(this.msg);
let button = document.querySelector('.button')
console.log(button.innerHTML);
},
我们可以看出在updated钩子函数中，数据才和视图保持一致。
beforeDestroy:销毁前
在实例销毁之前调用，实例仍然完全可用，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
在销毁之前还可以访问到DOM结构 以及data中相关的数据,
destroyed:销毁后
所有的事件监听器会被移出，所有的子实例也会被销毁。
还是可以访问到data中的属性,但访问不到DOM结构了
<span ref="span">{{num}}</span>
<button @click="$router.push('/about')">go</button>
data() {
return {
num:1
}
},
beforeDestroy(){
console.log(this.num); // 1
console.log(this.$refs.span); // <span>1</span>
},
destroyed() {
console.log(this.num); // 1
console.log(this.$refs.span); // undefined
}