实例生命周期
每个vue实例在被创建之前都要经过一系列的初始化过程，例如，实习需要配置数据观测，编译模版，挂载实例到dom，然后在数据变化时更新dom，在这个过程中，实例也会调用一些生命周期钩子，下面我们通过一些例子来解释各个生命周期钩子。
生命周期钩子
beforeCreate: 在实例初始化之后，数据观测，和event/watcher事件配置之前调用，
new Vue({
el: '#app',
template: '<App/>',
components : { App },
data: {
msg: 'this is lifecycle'
},
methods: {
getLists() {
return 'getLists'
}
},
beforeCreate() {
console.log('beforeCreate:', this.msg, this.getLists())
}
})
这个例子在beforeCreate阶段获取实例数据和方法，在浏览器中执行的结果如下：说明在这个阶段还不能获取数据。
image.png
created: 实例已经创建完成之后被调用，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event的回调，还是用上面这个列子
new Vue({
el: '#app',
template: '<App/>',
components : { App },
data: {
msg: 'this is lifecycle'
},
methods: {
getLists() {
return 'getLists'
}
},
created() {
console.log('created:', this.msg, this.getLists())
}
})
运行结果如下：
image.png
我们再看一个列子，异步从后台获取数据：
html：
<ul>
<li v-for="(item, index) in imgs" :key="index" v-if="imgs&&imgs.length>0">
</li>
</ul>
js:
let url = 'http://rapapi.org/mockjsdata/18071/slide/slideLists.do?'
new Vue({
el: '#app',
data: {
msg: 'this is lifecycle',
imgs: null
},
methods: {
getLists() {
this.$http.post(url).then(res => {
this.imgs = res.data.data.slideList
})
},
init() {
// do something
}
},
beforeCreate() {
// console.log('beforeCreate:', this.msg, this.getLists())
},
// 异步数据的请求适宜在created钩子中调用，初始化
created() {
this.getLists()
console.log('created:',document.querySelectorAll('li').length) // length: 1
},
beforeMounte() {
console.log('created:',document.querySelectorAll('li').length) // length: 1
},
mounted() {
console.log('created:',document.querySelectorAll('li').length) // length: 0
},
})
结合html和js看这个列子，在控制台的结果如下图所示：
image.png
首先在这个列子中，我们异步获取数据，节点的渲染在生命钩子之后，获取li节点的长度，在beforeCreate和created钩子中，节点的长度为1，因为在这个钩子中，el还没挂载，在mounted中li节点的长度为0，因为在此钩子中，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，
但是由于是异步获取数据，仙剑的vm.$el中数据还没获取过来，所以获取的长度是0.
下面我们再看一个例子：在各个钩子中，动态的改变data的数据，并看他们在页面渲染的异同。
html：
<ul>
<li v-for="(item, index) in arr" :key="index">{{item}}</li>
</ul>
js:
new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
},
created() {
setTimeout(() => {
this.arr = [10, 11, 12, 13]
this.$nextTick(() => {
console.log('nextTick:',document.querySelectorAll('li').length)
})
},
beforeMounte() {
console.log('mounted:',document.querySelectorAll('li').length)
},
mounted() {
console.log('mounted:',document.querySelectorAll('li').length)
},
// 数据更新完毕，如果对数据更新做统一处理，在updated钩子中处理即可；
// 如果想分别区别不同的数据更新，使用nextTick函数处理即可
beforeUpdate() {
console.log('mounted:',document.querySelectorAll('li').length)
}
updated() {
console.log('mounted:',document.querySelectorAll('li').length)
}
})
在浏览器运行的结果如下：
image.png
业务逻辑的处理时机
created：异步数据的获取、初始化
mounted：挂载元素内dom节点的获取
nextTick：更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理
