每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

官方文档：生命周期钩子API — Vue.js (vuejs.org) (opens new window)

vue对象的生命周期

生命周期：

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
2. 是什么？Vue在关键时刻帮我们调用的一些特殊名称的函数。
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4. 生命周期函数中的this指向是vm 或 组件实例对象。

---

1. 初始化显示

   • beforeCreate()

   • created()

   • beforeMount()

   • mounted()

2. 更新状态

   • beforeUpdate()

   • updated()

3. 销毁 vue 实例: vm.$destory()

   • beforeDestory()

   • destoryed()

原理解释图

常用的生命周期方法

• mounted(): 发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】
• beforeDestroy(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】

关于销毁Vue实例

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

父子组件的生命周期

加载渲染过程：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed