VueLifeCycle生命周期钩子函数【非深入】

1. 在我们使用 Vue 写项目时，必须要了解 Vue 实例化过程中所经历的一些事件。Vue 实例从被创建到销毁的阶段被称作生命周期，在其中我们可以通过八大生命周期钩子函数在 Vue 实例化的不同阶段添加自己希望书写的代码。

（1）beforeCreate：vue 实例刚刚创建出来，data、methods、computed 等均不可以调用。一般在此处可以添加一个 loading 事件。

（2）created：vue 实例已经创建，data、methods 等已经可以在实例内部调用。

　　同时，一般在此钩子函数中进行异步请求。在此时还不可以进行对DOM的操作，例如使用 $refs 获取DOM中的元素节点会得到undefined，如果希望在 mounted 之前的钩子函数中调用DOM元素，要加上 $nextTick().

（3）beforeMount：在此阶段模板已经完成编译并在内存中渲染，但还未渲染在页面中。【如果不存在 template，则将 el 对应的DOM元素当做模板，如果存在 template，则将其进入到 render 函数进行渲染】

（4）mounted：此时已经创建了 vm.$el，并替换原 el 对应DOM元素，可以对DOM元素进行操作了，例如使用 $refs.

（5）beforeUpdate：此时实例中的数据已经更新，但还未渲染到页面中。

（6）updated：页面已经重新渲染。

（7）beforeDestroy：销毁组件之前，可以进行一些提示：您确定要销毁xxx吗？

（8）destroyed：vue 实例已经被销毁。

拓展：如果在使用 router 时，使用了 keep-alive，那么会对组件进行一个缓存，每次进入组件不会执行 created，但如果我们希望每次进入组件时执行一些操作，则需要 activated 激活钩子函数，与之对应的是deactivated，当我们离开组件时进入此钩子函数。

2. 在这里简单的测试一下：【一个页面加载时，会执行四个周期函数，即 beforeCreate、created、beforeMount、mounted】

beforeCreate：此时 vue 实例中 data 和 methods 都还没有初始化，得到的是 undefined，模板也还未挂载，DOM中无法获取 vue 实例的内容。

 created：此时 vue 实例中的 data 和 methods 初始化完毕。

 beforeMount： 此时完成了模板的编译，但还没有挂载到页面DOM上，没有在页面中渲染出来。【如果Vue实例中传入了template，那么就会编译此template并覆盖el中的DOM，如果没有传入template，则会将el中的DOM当做模板】

 mounted：此时模板渲染完毕在页面中显示出来。

 beforeUpdate：此时 data 中的数据已经更新，但还未渲染到页面中。

updated：此时数据更新并且页面中的数据也重新进行了渲染。

beforeDestroy：此时 Vue 实例还未被销毁，但是模板和页面中的数据已经不是更新过的数据了，回到了原始状态；而 Vue 实例中的数据仍然是更新过的数据。

destroy：此时 Vue 实例已经销毁。

最后转载一张别人的图：https://juejin.cn/post/6844903945567993870#heading-1

原文链接：https://www.cnblogs.com/twinkleG/p/15520064.html