Vue的生命周期【详解】

vue生命周期是什么？

Vue生命周期指的是vue的实例对象从创建到销毁的过程，它的所有功能的实现都是围绕着生命周期来进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

这是vue生命周期的详细图解
vue生命周期分为三个阶段 创建期间的生命周期函数、运行期间的生命周期函数和销毁期间的生命周期函数
beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

一、创建期间的生命周期函数：

1.beforeCreate( ) { }

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

2.created( ) { }

实例已经在内存中创建好,此时data 和 methods 已经创建好，但是不能获取DOM元素

3.beforeMount( ) { }

表示模板字符串已经在内存中编译完成了，但是尚未把模板渲染到页面中，仍不能获取DOM 元素

4.mounted( ) { }

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

二、运行期间的生命周期函数：

1.beforeUpdate( ) { }

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

2.updated( ) { }

实例更新完毕之后调用此函数 在数据发生了改变，并且视图页面也更新完成时执行的操作

三、销毁期间的生命周期函数：

1.beforeDestroy( ) { }

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

2.destroyed( ) { }

Vue 实例销毁后调用 Dom元素被销毁，对应的vue实例所有指令都被解绑，所有事件监听器被移除，所有的子实例也被销毁

扩展：

    keep-alive 是vue提供的一个内部组件，可以实现组件的缓存，当组件切换时,主要用于保留组件状态或避免重新渲染.
    keep-alive 常用的两个属性 include / exclude，允许组件有条件的进行缓存
    keep-alive 也有两个生命周期，用来得知当前组件是否处于活跃状态：
   1.    activated           缓存组件激活
   2.    deactivated       缓存组件不激活

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确地控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。