vue的生命周期包含四个阶段，执行顺序分别为
vue生命周期包含四个阶段，每个阶段有前后两个钩子函数，共计8个钩子函数。
初始化前（beforeCreate）、初始化后（created）
挂载前（beforeMount）、挂载后（mounted）
更新前（beforeUpdate）、更新后（updated）
销毁前（beforeDestroy）、销毁后 （destroyed）
beforeCreate：实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用
created：可以响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。
<template>
<div ref="h">
{{loading}}
</div>
</template>
export default {
name:'',
props:{
listData:{
type:Object
}
},
data(){
return {
loading:false
}
},
//初始化钩子函数
beforeCreated(){
// 该钩子函数会在data()之前调用，所以无法获取到data()内的数据。
console.log(this.loading)
// 该钩子函数可以获取到父组件传递的数据，通过this.$props获取父组件数据
console.log(this.$props.listData)
}
created(){
// 初始化钩子函数中，进行初始化数据
this.loading = true
console.log(this.$refs.h) //此时还没挂载，无法获取到dom h的对象
}
}
挂载DOM前/后调用。
<template>
<div ref="h">
{{loading}}
</div>
</template>
export default {
name:'',
props:{},
data(){
return {
loading:false
}
},
//DOM创建之前调用
beforeMounted(){
//该钩子函数会在挂载dom之前调用，获取不到dom
console.log(this.$refs.h)
}
//DOM创建之后调用
mounted(){
// 初始化钩子函数中，进行初始化数据
this.loading = true
//该钩子函数会在挂载dom之后调用，可以获取到dom
console.log(this.$refs.h)
}
}
组件的响应式状态变更，而更新其 DOM 树之前/后调用。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.js"></script>
</head>
<body>
<div id="app">
<full></full>
</div>
<template id="full">
<div >
这里是子组件
<p ref="p">{{number}}</p>
<button @click="add"> 新增</button>
</div>
</template>
<script>
Vue.component('full' ,{
template:'#full',
data(){
return{
number:1
}
},
methods:{
add(){
this.number++
}
},
//在DOM更新之前调用
beforeUpdate(){
console.log(this.number)
debugger
},
updated(){
// console.log(this.number)
// debugger
}
})
new Vue({}).$mount('#app')
</script>
</body>
</html>
效果图
当点击新增之后，数据立即做了更新，但是DOM还没有被更新。也就说明 beforeUpdate 是在更新DOM之前调用。上面完整代码可供拷贝参考。
组件销毁前/后调用。例如销毁组件的定时器
export default {
name:'',
props:{},
data(){
return {
loading:false,
data:[]
}
},
created(){
this.timer = setInterval(()=>{
//轮询数据
this.getData()
},1000)
},
methods:{
getData(){ //初始化数据
axios.get(...).then(res=>{
this.data = res.data
})
}
},
//实例在销毁之后调用
destroyed(){
// 初始化钩子函数中，进行初始化数据
clearInterval(this.timer)
}
}