vue的生命周期有四个阶段，相应的Vue也准备了四对生命周期函数：
创建阶段前：beforeCreate。
创建阶段后：created。此时数据已经准备完毕，可以发送初始化渲染请求。
挂载阶段前：beforeMount
挂载阶段后：mounted。此时页面的Dom已经正式渲染完毕，可以开始操作Dom。
更新阶段前：beforeUpdate
更新阶段后：updated
销毁阶段前：beforeDestroy。常用来释放Vue以外的资源，比如定时器、延时器。
销毁阶段后：Destroyed
vue官网相关示意图
其中，比较常用的有created、mounted、beforeDestroy。
使用方法
钩子函数与data等同级，直接写在Vue下。但与data等不同，钩子函数是写成函数形式。
创建阶段的函数：
<body>
<div id="app" class="container">
<div></div>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
birthYear:2025
},
//创建阶段
beforeCreate(){
console.log("响应式数据尚未准备," + this.birthYear)
},
created(){
console.log("响应式数据已经准备完毕," + this.birthYear)
}
})
</script>
</body>运行页面后我们来看浏览器的控制台：
可以看到我们在Vue中声明的变量birthYear，在beforeCreate时访问是未声明，而后在created中则已经准备好。我们通常会在created中给变量赋值，比如该变量的值需要通过某个请求获取等等，此时就可以在created方法中做
挂载阶段函数：
<body>
<div id="app" class="container">
<p>{{ birthYear }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
birthYear:2025
},
//挂载阶段
beforeMount(){
console.log("Dom渲染前," + document.querySelector('p').innerHTML)
},
mounted(){
console.log("Dom渲染后," + document.querySelector('p').innerHTML)
}
})
</script>
</body>我们准备了个<p>标签，在里面使用插值表达式，运行页面后，我们来看控制台：
可以看到，在挂载阶段将页面渲染前，插值表达式并未被替换成birthYear的值。
更新阶段：
更新阶段与前两个有一个区别，所有的 视图更新 视为一个个更新阶段，每次更新都会触发一次更新前后的钩子函数。beforeUpdate拿到的旧Dom，而updated拿到的是新Dom。
<body>
<div id="app" class="container">
<div class="box">
<button @click="birthYear++">+</button>
<p>{{ birthYear }}</p>
<button @click="birthYear--">-</button>
</div>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
birthYear:2025
},
//更新阶段
beforeUpdate() {
console.log("更新前," + document.querySelector('div').innerHTML)
},
updated() {
console.log("更新后," + document.querySelector('div').innerHTML)
}
})
</script>
</body>运行效果：
我们点一次添加按钮，然后打开控制台：
卸载阶段：
卸载通常发生在页面销毁时，Vue对象也会跟着销毁。但是我们可以手动去销毁Vue对象，触发销毁钩子函数。
Vue对象被销毁后，已经渲染好的Dom不会消失（即页面依旧在那），但是有关vue的组件已经失效。以更新阶段的代码为例，运行后打开控制台，输入
vue对象名.$destroy然后再去点增加按钮减少按钮，中间的数据不会再反应。