生命周期

组件的生命周期

1. 生命周期定义

生命周期Life Circle: 是指一个组件从创建、运行、销毁的整个过程。强调一个时间段！

2. 生命周期函数

生命周期函数是vue框架提供的内置函数，伴随组件的生命周期自动按次序执行。

这些叫做生命周期钩子的函数，可以给用户在不同阶段添加代码的机会。

钩子名固定，与data和methods属于平级的关系

2.1 vue2.x生命周期函数

---

• beforeCreate(): 在实例初始化之后，但数据代理还没开始，故无法通过vm访问到data中的数据和methods中的方法
• created(): 在实例创建完成后被立即同步调用
• beforeMount(): 在挂载开始之前被调用，页面呈现未经vue编译的DOM结构，所有DOM操作都不奏效
• mounted(): 组件初次在页面中渲染完毕后
• beforeUpdate(): 数据发生改变后，在DOM被更新之前调用
• updated(): 在数据更改导致的虚拟DOM重新渲染和更新完毕后执行
• 调用vm.$destroy()才会销毁
• beforeDestroy(): 实例销毁前调用，这里实例完全可用，可以访问数据也能调用方法，但数据的修改不会触发更新了
• destroyed(): 所有的指令解绑，事件监听器被移除。

---

常用的钩子函数：

• mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
• beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

reference：(70条消息) Vue2生命周期详细讲解——周期图示、代码演示变化_vue2 vue-router生命周期_焦妮敲代码的博客-CSDN博客

---

2.2 vue3.x生命周期函数

---

我们可以发现，vue3.x的钩子函数和2.x大部分相同，只是最后实例销毁有不同。

reference：(70条消息) Vue2.和Vue3.生命周期的区别，对比。 详解生命周期中的每个钩子函数，setup,_南工gjl的博客-CSDN博客