重学Vue--Vue生命周期

什么是Vue的生命周期？

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

Vue生命周期的作用？

在Vue生命周期中会伴随多个事件钩子，这些事件钩子在控制整个Vue实例中可以形成更好的逻辑。
Vue生命周期总共分为 ： 初始化 前后，创建前后，更新前后，销毁前后

Vue生命周期过程？

Vue的生命周期过程在官网中给出了一张图片可以帮助我们很好的理解

Vue生命周期

用文字的方式叙述就是

1. Vue的生命周期从创建一个Vue实例开始，之后Vue要进行初始化事件和初始化生命周期。
2. 执行beforeCreate钩子函数，这个函数执行在初始化之后，创建组件之前，所以还不能访问数据，组件中的data，ref都为undefind。
3. 进入了初始化中，初始化data和props，并且给数据绑定上数据劫持
4. 执行created钩子函数，这个函数在组件创建完成后立即被调用，组件中有了data对象，可以操作data，可以发请求和访问数据了，ref依然为undefind。因为还没有挂载，所以el不可用。
5. 进行编译选项，是否有el或template，再根据编译选项作为模板将数据和compile函数(编译函数)进行结合，创建出虚拟DOM对象。

以上初始化阶段完成，下面来描述创建过程

6. 数据挂载前先执行beforeMount钩子函数，页面还没有创建出HTML元素，data初始化已经完成，虚拟dom已经存在
7. 创建vm.$el来替换el，并切换掉原有的编译模板，生成一个真正可用的HTML
8. 完成页面的数据挂载后执行Mounted，这时可以操作数据和DOM了

以上，创建阶段描述完了，接下来是数据更新时

9. 当数据被更新时调用beforeUpdate钩子函数，它在页面数据更新之前调用，并监听数据的变化，但不可以在这里更改数据
10. 虚拟DOM重新渲染并应用更新
11. updated数据更新完毕 在这个生命周期钩子函数中 我们可以获取到当前最新的数据（也就是页面中的最新数据）

以上，更新阶段描述完了，接下来是销毁阶段

12. 当调用vm.$destroy()函数时，进入销毁阶段
13. beforeDestroy 销毁之前 还是可以使用HTML的，也可以获取到数据
14. 销毁中 终止对象劫持（最主要）子组件，事件
15. destroyed 销毁之后 我们对 Vue实例提供的DOM操作就无效了 但是还是可以获取到数据的

Vue生命周期钩子函数？

钩子函数	作用
beforeCreate	该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。
Created	该函数在组件创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了，即可以访问数据，发请求，ref依旧是undefined，挂载阶段还没开始，$el 属性目前尚不可用。一般将数据的初始化和初始化页面的请求放在这里面
BeforeMount	该函数在组件挂载之前，在该阶段页面上还没渲染出 HTML 元素，data 初始化完成，ref 依旧不可以操作，相关的 render 函数首次被调用。可以访问数据，编译模板结束，虚拟 dom 已经存在。该钩子在服务器端渲染期间不被调用。
Mounted	该函数是页面完成挂载之后执行的，这时 el 被新创建的 vm.$el 替换了，就可以操作 ref 了，一般会用于将组件初始时请求数据的方法放到这里面，filter 也是在这里生效。可以拿到数据和节点，实例被挂载后调用。该钩子在服务器端渲染期间不被调用。
BeforeUpdate	该函数在数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
Updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，在数据更新之后做一些处理，即监控数据的变化。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。该钩子在服务器端渲染期间不被调用。watch是监控特定数据的变化，而updated是监控组件里所有数据的变化。
BeforeDestroy	该函数在实例销毁之前调用，这里的 ref 依旧可以操作，实例仍然完全可用，可以在这里做清除定时器的操作，防止内存泄漏。该钩子在服务器端渲染期间不被调用。
Destroyed	该函数在组件销毁的时候执行，即实例销毁后调用，这里的 ref 不存在。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。

另外在使用keep-alive 时还存在两个钩子函数

钩子函数	作用
Activated	被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
Deactivated	被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。

后记

这是我总结的关于Vue生命周期的一些知识，如有错误希望小伙伴们热心的告诉我，我及时改正。

参考

Vue的生命周期（简单的过程）