vue页面刷新及组件生命周期钩子函数的整理

vue生命周期可以分为八个阶段

分别是：beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

1、创建前（beforeCreate）

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3、载入前（beforeMount）

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、载入后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5、更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7、销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

———————————————————————————————————————————

以上是组件的生命周期的八个阶段，那么页面刷新重载用到了什么钩子函数，经过测试得到的是另外4个钩子函数.beforeUpdate，updated，activated,deactivated.这几个钩子函数不常见，在引入keep-alive 的时候，触发顺序就为 created-> mounted-> activated，刷新的时候销毁阶段需要加入deactivated这个钩子。

总结:keep-alive的时页面刷新时触发3个钩子函数 activated，beforeUpdate，updated，切换，前进，后端触发activated，deactivated

参考资料：vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted_Cookie-1的博客-CSDN博客_vue页面刷新触发哪些钩子