beforeCreate
在这个钩子函数里，只是初始化实例，拿不到实例里data和methods和事件监听等。
data: {
msg: 'xx'
},
methods: {
getLists(){
return 'aaa'
}
},
beforeCreate() {
console.log('beforeCreate',this.msg,this.getLists())
}
运行代码报错:
created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 ，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
这是最早能拿到实例里面的数据和方法的一个钩子函数。应用场景：异步数据的获取和对实例数据的初始化操作。
data: {
msg: 'xx',
imgs: null
},
methods: {
getLists(){
this.$http.get(url).then(res=>{
this.imgs = res.data.lists
console.log(this.imgs)
})
}
},
created() {
this.getLists()
}
beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。
不论是created还是beforeMount在它们里面都拿不到真实的dom元素，如果我们需要拿到dom元素就需要在mounted里操作
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
data: {
arr: [1,2,3]
},
created() {
console.log('created',document.querySelectorAll('li').length)
},
beforeMount() {
console.log('beforeMount',document.querySelectorAll('li').length)
},
mounted() {
console.log('mounted',document.querySelectorAll('li').length)
},
})
</script>
mounted
- 上面的代码mounted可以拿到dom元素，但也只是能拿到初始化数据里的dom元素，如果是存在异步对dom元素数据进行更改就只能在updated里获取，应用场景：初始数据（在data中有的）的dom渲染完毕，可以获取dom
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
created() {
setTimeout(()=>{
this.arr = [4,5,6,7]
console.log('created',document.querySelectorAll('li').length)
})
},
mounted() {
console.log('mounted',document.querySelectorAll('li').length)
}
执行代码，不管是mounted还是created里拿到的length都是3，而不是4.
beforeUpdate
- 当数据更新后出发的钩子函数，这个钩子函数里拿到的是更改之前的数据,重新渲染之前被调用。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。
created() {
setTimeout(()=>{
this.arr = [4,5,6,7]
console.log('created',document.querySelectorAll('li').length)
})
setTimeout(()=>{
this.arr = [10,11,12,13,14]
console.log('created',document.querySelectorAll('li').length)
},1000)
},
beforeUpdate() {
console.log('beforeUpdate',document.querySelectorAll('li').length)
},
updated() {
console.log('updated',document.querySelectorAll('li').length)
},
不要在当前钩子里修改当前组件中的data，会继续触发beforeUpdate、updated这两个生命周期，进入死循环！
上面updated执行了两遍，之所以一开始created是3是因为在一个异步里，也是在mouted后获取的所以是3。
如果想分别区别不同的数据更新，同时要对dom进行操作那么需要使用nextTick函数处理
created() {
setTimeout(()=>{
this.arr = [4,5,6,7]
this.$nextTick(()=>{
console.log('nextTick',document.querySelectorAll('li').length)
})
})
setTimeout(()=>{
this.arr = [10,11,12,13,14]
this.$nextTick(()=>{
console.log('nextTick',document.querySelectorAll('li').length)
})
},1000)
},
updated，watch和nextTick区别
updated对所有数据的变化进行统一处理
watch对具体某个数据变化做统一处理
nextTick是对某个数据的某一次变化进行处理
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例会被销毁。
beforeDestroy和destroyed只能通过手动触发$destroy来调用
let app = new Vue({
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
}
})
app.$destroy()
