什么是Vue的生命周期

每种事物从诞生到消亡，都有自己的生命周期。而我们这里的Vue 的生命周期指的是 Vue 组件的生命周期。

我们先来看大家都很熟悉的Vue的生命周期图

Vue的生命周期

这幅图非常详细的介绍了 Vue 的生命周期，总的来说 Vue 的生命周期包括四个状态，分别是：creating 状态、mounting 状态、updating 状态和destroying 状态。

creating 状态，vue 实例被创建的过程
mounting 状态，挂到到真实的 DOM 节点
updating 状态，如果 data 中的数据改变就会触发对应组件的重新渲染
destroying 状态，实例销毁

Vue 生命周期方法

上面个四个状态对应 8 个方法

beforeCreate，creating 状态
实例创建之前调用

created，creating 状态
实例创建成功，此时 data 中的数据显示出来了

beforeMount，mounting 状态
数据中的 data 在模版中先占一个位置

mounted，mounting 状态
模版中的 data 数据直接显示出来了

beforeUpdate，updating 状态
当 data 数据发生变化调用，发生在虚拟 DOM 重新渲染和打补丁之前

updated，updating 状态
数据更改导致的虚拟 DOM 重新渲染和打补丁

beforeDestroy，destroying 状态
在 vue 实例销毁之前调用，此时实例任然可用

destroyed，destroying 状态
在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

Vue的生命周期函数调用顺序验证

先看一下代码

<div id="container">
  <button @click="changeMsg()">change</button>
  <span>{{msg}}</span>
 </div>

<script type="text/javascript">
 var vm = new Vue({
  el:'#container',
  data:{
    msg:'TigerChain'
  },
  beforeCreate(){
    console.group("%c%s","color:red",'beforeCreate--实例创建前状态')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  created() {
    console.group("%c%s","color:red",'created--实例创建完成状态')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  beforeMount() {
    console.group("%c%s","color:red",'beforeMount--挂载之前的状态')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  mounted() {
    console.group("%c%s","color:red",'mounted--已经挂载的状态')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  beforeUpdate(){
    console.group("%c%s","color:red",'beforeUpdate--数据更新前的状态')
    console.log("%c%s","color:blue","el  :"+this.$el.innerHTML)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
    console.log("%c%s","color:green","真实的 DOM 结构:"+document.getElementById('container').innerHTML)
  },
  updated() {
    console.group("%c%s","color:red",'updated--数据更新完成时状态')
    console.log("%c%s","color:blue","el  :"+this.$el.innerHTML)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
    console.log("%c%s","color:green","真实的 DOM 结构:"+document.getElementById('container').innerHTML)
  },
  activated() {
    console.group("%c%s","color:red",'activated-- keep-alive 组件激活时调用')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  deactivated(){
    console.group("%c%s","color:red",'deactivated-- keep-alive 停用时调用')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  beforeDestroy() {
    console.group("%c%s","color:red",'beforeDestroy-- vue实例销毁前的状态')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  destroyed() {
    console.group("%c%s","color:red",'destroyed-- vue实例销毁完成时调用')
    console.log("%c%s","color:blue","el  :"+this.$el)
    console.log(this.$el);
    console.log("%c%s","color:blue","data  :"+this.$data)
    console.log("%c%s","color:blue","message  :"+this.msg)
  },
  methods: {
    changeMsg() {
      this.msg = 'TigerChain111'
    }
  }
})
</script>

上面的代码运行的时候，依次调用 Vue 的 beforeCreate、created、beforeMount、mounted 四个方法直至完成组件的挂载。

挂载在 Vue 中指的就是 El 被实例的 vm.$el 所替换，并且挂载到该实例中，通俗的说就是，Vue 的实例挂靠到某个 DOM 元素「挂载点」的这一个过程，在上面的例子中就是把 Vue 的实例挂靠到 id 为 container 的 div 元素上。

根据控制台打印的调用顺序以及官方的Vue生命周期图可知：

在 created 的时候数据已经和 data 属性 msg 进行绑定了,但是此时El选项还没有挂载。
created 方法和 beforeMout 方法之间有一些条件，从官方的生命周期图上可以看出。

接下来我们点击页面上的change按钮
控制台先后打印了beforeUpdate和update方法，我们可以看到虚拟 DOM 和真实 DOM 的改变，真实 DOM 在更新前没有改变，更新后才发生改变，而虚拟 DOM 则在更新前的时候就改变了

最后我们在代码上添加一个 button 并且调用 destroy() 点击事件去手动调用 vue 的 destroy 方法。

<button @click="destroy()">destroy</button>

 destroy() {
   this.$destroy() 
 }

控制台先后打印了beforeDestroy 和 destroyed方法，两个方法打印的东西是一样的，但实际上它们是有区别的。在 beforeDestroy 阶段，Vue 实例是完全可以使用的，当调用了 destroyed Vue 实例就会解除所有绑定，所有事件被移除，子组件被销毁，所以以当 destroyed方法执行了以后，再点击界面上的 change 就再也没有效果了。

了解Vue生命周期的意义

Vue不同的生命周期会有着不同的操作，我们要熟悉生命周期的每个阶段，才能去做相应的操作。比如：一般情况下我们在 beforecreate 方法中可以加 Loading 事件，在 created 方法中结束 Loading，并且还可以在此方法中做一些初始化操作，在 mounted 方法中进行发起异步服务端请求。当然，如果你想页面没有加载完成就请求数据那么在 created 方法请求数据也没有什么问题，可以在 beforeDestroy 方法中弹出确认删除，destroyed 中清除相关数据达到资源的有效利用