vue生命周期

前言：

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

        vue生命周期分为三个阶段 创建期间的生命周期函数、运行期间的生命周期函数和销毁期间的生命周期函数

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

1.beforeCreate( ) {  }         

  实例刚在内存中被创建出来，data和methods还没初始化好

2.created( ) {  }                  

实例已经在内存中创建好,此时data 和 methods 已经创建好

3.beforeMount( ) {  }       

表示模板字符串已经在内存中编译完成了，但是尚未把模板渲染到页面中

4.mounted( ) {  }         

此时，已经将编译好的模板，挂载到了页面指定的容器中显示 

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

1.beforeUpdate( ) {  }

状态更新之前执行此函数  在数据发生改变，但页面还没有完成更新时执行的操作

2.updated( ) {  }

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

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

1.beforeDestroy( ) {  }

实例销毁之前调用 此阶段vue实例仍完全可用，可以访问到页面响应式数据和事件

2.destroyed( ) {  }

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

扩展：

        keep-alive 是vue提供的一个内部组件，可以实现组件缓存，当组件切换时,主要用于保留组件状态或避免重新渲染.

        keep-alive 常用的两个属性 include / exclude，允许组件有条件的进行缓存

        keep-alive 也有两个生命周期，用来得知当前组件是否处于活跃状态：

       1.    activated           缓存组件激活

       2.    deactivated       缓存组件不激活