对Vue的生命周期理解(一)

对Vue生命周期的理解(一)

1、什么是Vue的生命周期？

Vue实例在被创建时，经过：开始创建、数据初始化、编译模板、挂载DOM->渲染、更新->渲染、销毁等一系列过程，我们称之为Vue的生命周期。

每个Vue实例都有一个完整的生命周期过程。

1、Vue的八个生命周期

1. beforeCreate ：initState 初始化尚未开始，是获取不到 data 、props 和 methods 中的数据和方法的。
2. created ：初始化完成，可以访问之前访问不到的数据了，但是这个时候组件还未挂载，页面上是看不到数据的。
3. beforeMount ：这开始创建 VDOM ,执行虚拟DOM。
4. mounted ： 将 虚拟DOM ( VDOM )渲染为 真实DOM，并且将数据渲染数据上去。组件中如果有子组件的话，会递归挂载子组件，只有当子组件全部挂载完毕，才会执行根组件的挂载钩子函数。
5. beforeUpdate ：(这个是mounted内的)在数据更新前调用
6. updated ：(这个是mounted内的)在数据更新后调用
7. beforeDestroy ：适合移除事件、定时器等，解决可能会引起的内存泄露问题
8. destoryed ：销毁组件内的一切操作。如果有子组件，先销毁所有子组件才会执行跟组件的 destroyed 钩子函数。

总共分为8个阶段，分别是：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后 。

2、keep-alive 独有的生命周期

• 使用 keep-alive 组件包裹会被销毁的组件， keep-alive 会在将要销毁的时候将组件缓存起来，当下次调用时，使用上次缓存的组件，而不会继续重新创建了。

• 当组件在 keep-alive 组件内被切换时，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

  • activated : 组件成为活跃状态，组件放在了 keep-alive 组件内部

  • deactivated : 组件失去了活跃状态，在将要被销毁时被 keep-alive 缓存下来