VUE—生命周期

---

前言

生命周期可谓vue学习一大重点，今天就来梳理一下关于它的知识点。

---

理解生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期。
其中包含了八个生命周期函数（也叫生命周期钩子），分别对应vue组件所处生命周期的某个状态，发挥着各自的作用。
生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。

下图是vue官网提供的生命周期示意图，笔者在此基础上增加了一些笔记，帮助自己更好地理解生命周期。

八个生命周期函数（钩子）

• beforeCreate() 创建之前

• created() 创建完成

• beforeMount() 挂载之前

• mounted() 挂载完成 🔸常用
  发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

• beforeUpdate() 更新之前

• updated() 更新完成

• beforeDestroy() 销毁之前 🔸常用
  清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

• destroyed() 销毁完成

  1 销毁后借助Vue开发者工具看不到任何信息。
  2 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

---

总结

前端开发，简单来讲就是在合适的时间（用户点击等行为）将合适的数据放在页面合适的位置。
而Vue为我们提供了八个可以在不同的状态下调用的函数，在关键时刻帮我们调用的这些特殊名称的函数，极大的方便了数据操作。使得程序更有结构化，维护起来也更方便。
上述八个生命周期函数在实际开发中最常用的两个为mounted()、beforeDestroy() ，结合上面示意图可以更好的理解使用，方便我们编程时明了何时调用对应函数 该将功能代码放到哪个函数中。