目录
一、Vue生命周期的定义
二、Vue生命周期的主要阶段
（一）创建阶段
1. beforeCreate
2. created
3. beforeMount
4. mounted
（二）更新阶段
5. beforeUpdate
6. updated
（三）销毁阶段
7. beforeDestroy
8. destroyed
三、流程图
四、代码演示
（一）创建阶段
（二）更新阶段
（三）销毁阶段
一、Vue生命周期的定义
生命周期：从vue实例产生开始到vue实例被销毁这段时间所经历的过程。
vue更像工具人，在整个过程中只会按照作者预设的程序去做事，不能由开发者去控制或者diy。如果这样开发时限制是比较多的，因此作者开放了生命周期，允许我们定义vue在特定的时候去做我们让其做的事情（钩子函数）。
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。
二、Vue生命周期的主要阶段
（一）创建阶段
1. beforeCreate
=> 创建 Vue 实例以前
=> 执行完毕这个钩子函数, 就会生成实例了
2. created
=> 创建 Vue 实例以后
=> 执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面
3. beforeMount
=> 挂载 数据 之前
=> 拿到页面结构, 准备渲染到页面上之前
=> 执行完毕这个钩子函数, 就会把准备好的数据渲染到页面上了
4. mounted
=> 挂载 数据 之后
=> 把 data 中的数据已经渲染到该渲染的标签上了
（二）更新阶段
5. beforeUpdate
=> 更新数据之前
=> 当你该实例的内容被更新的时候, 会在更新之前执行这个钩子函数
6. updated
=> 更新数据之后
=> 当你该实例的内容被更新以后, 渲染完毕页面会执行这个钩子函数
（三）销毁阶段
7. beforeDestroy
=> 销毁实例之前
=> 当你准备销毁当前实例了
=> 执行完毕这个钩子, 才会销毁当前实例
8. destroyed
=> 销毁实例之后
=> 当你销毁完毕这个实例了, 那么会执行一遍这个钩子函数, 然后整个 Vue 生命周期结束
=> 再也没有 Vue 实例了
三、流程图
四、代码演示
（一）创建阶段
<body>
<div >
<p >{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '大聪明',
iptmsg: "hello word",
},
//创建
beforeCreate() {
('创建实例之前');
('执行完毕这个钩子函数, 就会生成实例了,也就是说这个钩子函数执行时拿不到');
// 查看 Vue 内准备好的数据
('数据 : ', this.$data)
// 查看 Vue 捕获到的页面上的内容
('结构 : ', this.$el)
();
},
created() {
('创建实例之后');
('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
// 查看 Vue 内准备好的数据
('数据 : ', this.$data)
// 查看 Vue 捕获到的页面上的内容
('结构 : ', this.$el)
();
},
// 挂载
beforeMount() {
('挂载数据之前');
('拿到页面结构, 准备渲染到页面上之前,也就是还没有渲染');
(('box'));
();
();
},
mounted() {
('挂载数据之后');
('数据已经渲染到该渲染的标签上了');
(('box'));
();
();
},
})
</script>
</body>运行结果：
（二）更新阶段
<body>
<div >
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
// 更新
beforeUpdate () {
('更新之前');
// 查看 Vue 捕获到的页面上的内容
(this.$);
();
},
updated () {
('更新之后');
// 查看 Vue 捕获到的页面上的内容
(this.$);
();
}
})
</script>
</body>运行结果：
（三）销毁阶段
我们先看一下在未使用销毁阶段的钩子函数的情况下直接删除组件的效果。
<body>
<div >
<settime v-if="bool"></settime>
</div>
<script>
('settime',{
data(){
return{
time:1000
}
},
//创建阶段设置 num 变量
created () {
= null;
},
// 挂载阶段设置定时器
mounted () {
= setInterval( ()=>{
('倒计时');
--
},1000
)
},
// 销毁
beforeDestroy () {
('销毁前，清除定时器，事件解绑等等');
},
destroyed () {
('销毁后，清除定时器，事件解绑等等');
// clearInterval()
},
template:`
<div>
抢购倒计时
<div>{{time}}</div>
</div>
`
} )
var vm = new Vue({
el:'#app',
data:{
bool:true
},
})
</script>
</body>运行结果：
可以看到即使组件被销毁，定时器仍在执行。这时就用到销毁阶段的钩子函数了。只需要把清除定时器这一行代码解除注释。就可以了。
// 销毁
beforeDestroy () {
('销毁前，清除定时器，事件解绑等等');
},
destroyed () {
('销毁后，清除定时器，事件解绑等等');
clearInterval()
},运行结果：