Vue实例为生命周期提供了回调函数，用来在特定的情况下触发，贯穿了Vue实例化的整个过程，这给用户在不同阶段添加自己的代码提供了机会。
每个Vue实例在被创建时都要经过一系列的初始化过程，如初始数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
1.钩子函数
钩子函数用来描述Vue实例从创建到销毁的整个生命周期
| 钩子 | 说明 |
| beforeCreate | 创建实例对象之前执行 |
| created | 创建实例对象之后执行 |
| beforeMount | 页面挂载成功之前执行 |
| mounted | 页面挂载成功之后执行 |
| beforeUpdate | 组件更新之前执行 |
| updated | 组件更新之后执行 |
| beforeDestroy | 实例销毁之前执行 |
| destroyed | 实例销毁之后执行 |
2.beforeCreate和created钩子函数的使用：创建实例
Vue
<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{msg:'张三'}
,
beforeCreate(){
console.log("实例创建之前")
console.log(this.data.msg)
},
created(){
console.log('实例创建之后')
consolo.log(this.data.msg)
}
})
</script>3.beforeMount和mounted钩子函数的使用：页面挂载
Vue
<div id="app">{{msg}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{msg:'张三'},
beforeMount(){
console.log('挂载之前')
console.log(this.$el.innerHTML)
},
mounted(){
console.log('挂载之后')
console.log(this.$el.innerHTML)
}
})
</script>4.beforeUpdate和updated钩子函数的使用：数据更新
Vue
<div id="app">
<div v-if="isshow" ref="div">test</div>
<button @click="isshow=!isshow">更新</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isshow:false
},
beforeUpdate(){
console.log('更新之前')
console.log(this.$refs.div)
},
updated(){
console.log('更新之后')
console.log(this.$refs.div)
}
})
</script>5.beforeDestrory和destroyed钩子函数的使用：实例销毁
Vue
<div id="app">
<div ref="div">test</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{msg:'张三'},
beforeDestroy(){
console.log('销毁之前')
console.log(this.$refs.div)
console.log(this.msg)
console.log(vm)
},
destroyed(){
console.log("销毁之后")
console.log(this.$refs.div)
console.log(this.msg)
console.log(vm)
}
})
</script>