[Vue]生命周期

什么是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 中清除相关数据达到资源的有效利用