每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时这个过程也会运行一些叫做生命周期钩子的函数，使我们可以在不同阶段添加自己的代码。
Vue生命周期分为四个阶段：创建、挂载、更新、销毁。
生命周期钩子
所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。
beforeCreate
在实例初始化之后，组件创建、数据观测（data observer）和 event/watcher 事件配置之前调用。
此时访问不到实例中的数据。
<div id="app">
<div @click="handleClick">点击事件</div>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world',
},
beforeCreate () {
console.log(this.msg); // undefined
console.log(this.handleClick); // undefined
console.log('-----beforeCreate-----');
},
methods: {
handleClick () {
console.log(handleClick);
}
},
watch: {
msg: {
handler () {
console.log('侦听msg的值');
},
immediate: true,
}
}
})
打印顺序：
undefined
undefined
-----beforeCreate-----
侦听msg的值
created
在实例创建完成后被立即调用。
在这一步，实例已完成以下配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。
若要在第一时间调用methods中的方法，或操作data中数据，可以在此钩子中操作。
注意：执行此钩子时，还未渲染成HTML模板，挂载阶段还未开始，$el属性目前不可见。
此时，可以进行数据初始化和初始化页面的请求，将请求回来的数据赋值给data中的数据。
<div id="app">
<div @click="handleClick">点击事件</div>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world',
},
created () {
console.log(this.msg); // hello world
console.log(this.handleClick); // function () {...}
console.log(this.$el); // undefined
console.log('----------created-------');
},
methods: {
handleClick () {
console.log(handleClick);
}
},
watch: {
msg: {
handler () {
console.log('侦听msg的值');
},
immediate: true,
}
}
})
打印顺序：
侦听msg的值
hellow world
ƒ handleClick () { console.log(handleClick); }
undefined
----------created-------
beforeMount
在挂载开始之前被调用，此时模板已经编译完成，只是未将生成的模板替换el对应的元素。
在此钩子函数中，可以获取到模板最初始的状态。
此时，可以拿到vm. $el，只不过为旧模板。
<div id="app"> {{ msg }} </div>
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world'
},
beforeMount () {
console.log(this.$el); //<div id="app"> {{ msg }} </div>
}
})
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。其中的vm.$el为新模板。
执行完该钩子函数后，代表实例已经被完全创建好。filter也在这里生效。
若要在第一时间操作页面上的dom节点，可以在此钩子函数中操作。
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world'
},
mounted () {
console.log(this.$el); //<div id="app"> hellow world </div>
}
})
beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前，此时数据已更新，但是DOM未同步更新。
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world',
},
beforeUpdate () {
console.log(this.msg); // xxx
console.log(this.$el.outerHTML); // <div id="app"> hellow world </div>
}
})
vm.msg = 'xxx';
updated
数据更改导致DOM重新渲染和打补丁，之后会执行该钩子函数。此时数据和dm同步。
此时组件DOM已更新，可用执行依赖于DOM的操作，但多数情况下，应避免在此期间更改状态，最好使用计算属性或watcher。updated监控组件里所有数据的变化。
const vm = new Vue({
el: '#app',
data: {
msg: 'hellow world',
},
beforeUpdate () {
console.log(this.msg); // xxx
console.log(this.$el.outerHTML); // <div id="app"> xxx </div>
}
})
vm.msg = 'xxx';
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
可用在该钩子函数中，清除定时器，防止内存泄漏。
调用 vm.$destroy() 销毁实例后，定时器被清除，若没有在此钩子函数中清除定时器，则定时器仍然存在。
const vm = new Vue({
el: '#app',
data: {
timer: 0
},
created () {
this.timer = setInterval(() => {
console.log('xxx');
}, 500)
},
beforeDestroy () {
clearInterval(this.timer);
}
})
destoryed
Vue实例销毁后调用。实例的所有指令和事件监听器都会解绑。
