Vue生命周期

1、简介

什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为
生命周期!
生命周期钩子:就是生命周期事件的别名。

2、生命周期分类

2.1、创建期间的生命周期函数

beforeCreate（创建前）

这是我们遇到的第一个 生命周期函数，表示实例完全被创建出来之前，会执行它

注意：在 beforCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有初始化

created（已创建）

这是我们遇到的第二个生命周期函数，在created中，data 和 methods 都已经被初始化好了！

如果要调用 methods 中的方法，或者操作 data 中的数据 ，最早，只能在 created 中操作

beforeMount（挂载前）

这是我们遇到的第三个生命周期函数，表示，模板已在内存中编辑完成，但尚未把模板渲染到页面中在beforMount执行时，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串

mounted（已挂载）

这是我们遇到的第四个生命周期函数，它表示内存中的模板已经真实的挂载到页面中去了。用户已经可以看到渲染好的页面了

注意： mounted是实例在创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了

如果没有其他操作的话，这个实例就会静静的躺在我们的内存中。

2.2、运行期间的生命周期函数

beforeUpdate（更新前）

此时，我们的界面还没有更新，data数据已经更新了， 但页面还未和数据保持同步页面

updated（已更新）

当此事件执行时，页面中数据已经和打他中完成同步

2.3、销毁期间的生命周期函数

beforeDestroy（销毁前）

此时，Vue实例就已经从运行阶段，进入到销毁阶段:此时，实例的所有data, methods, 以及过滤器，指令等 还处于可用状态,此时，还没有真正执行销毁过程

destroyed（已销毁）

此时，组件已经被完全销毁，组件的所有数据，方法，指令等都无法再使用

3、图解 

看图片时建议ctrl+鼠标滚轮上划放大看

4、说明

本文参考  黑马程序员39期web前端-vue生命周期_哔哩哔哩_bilibili

本文是自己学习过程中的一些记录，仅供参考，