Vue生命周期的阶段与作用

**

首先呢我们需要知道什么是vue的生命周期？它分为几个阶段？它的作用是什么?

**
**

Vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

阶段

它可以总共分为11个阶段：创建前/后(1.beforeCreate,2.created),

载入前/后(3.beforeMount,4.mounted),

更新前/后(5.beforeUpdate,6.updated),

销毁前/后(7.beforeDestroy,8.destroyed),

激活时/未激活时(9.activated,10.deactivated)，当捕获一个来自子孙组件的错误时被调用(11.errorCaptured)(深入了解可以详看errorCaptured)

常用到就是前8阶段
**

作用

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

别的不说，一图即可看懂

代码例子

console.log方法可以使用占位符，但是要比C中的少的多
（1）%c：CSS格式字符串占位符，用来对输出内容进行样式渲染
（2）%s：字符串的占位符。
console.group()：分组显示 => 代码片.

创建前的状态:

beforeCreate: function () {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red", "message: " + this.message)
    },

**

创建完成的状态:

**

created: function () {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },

挂载前的状态:

 beforeMount: function () {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
    },

挂载完成的状态:

mounted: function () {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
    },

更新前的状态:

 beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },

更新完成的状态:

 updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },

销毁前的状态:

 beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },

销毁完成的状态:

destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message)
    }

**

激活时/未激活时(activated, deactivated)

**
activated钩子函数是在组件被激活后的钩子函数，mounted是不保证组件在document中，也就是组件还没有被激活，因此可以理解为activated执行在mounted之后。

**
说到这两个生命周期就需要考虑到keep-alive缓存

如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，
这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，
这就用到keep-alive
**

<-- !用keep-alive 标签包裹component组件标签-->

       

keep-alive对应两个生命周期,activated(){} deactivated(){}
通常我们不会用到该生命周期属性

beforeCreated:组件实例刚被创建，组件属性计算之前，如data等；
created:组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在；
beforeMount: 编译/挂载之前；
mounted: 编译/挂载之后（不保证组件已在document中）；
beforeUpdate: 组件更新前；
updated: 组件更新后；
activated: 组件被激活时调用；
deActivated: 组件被移除时调用；
beforeDestory: 组件被销毁之前；
destoryed: 组件被销毁之后。

**

errorCaptured

一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”，这个基本上我们很少用到！！！