Vue生命周期

在 Vue 实例中，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM，便需要使用到生命周期钩子函数。从创建到销毁的过程，就是生命周期。它的生命周期中有多个事件钩子，可以让在控制整个Vue实例的过程时更容易形成好的逻辑。

列举钩子函数

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

errorCaptured

deactivated

activated

共有11个生命周期。

周期分析

逐个分析前，先看执行顺序

<input type="text" v-model="input" placeholder="请输入你想输入的内容">
<p id="box">{{input}}</p>

 data () {
    return {
      input: '',
      number: 123
    }
  },
  //box为DOM元素，this.number为data中的数据
  beforeCreate () {
    var box = document.getElementById('box')
    console.log('beforeCreate---', box, this.number) 
  },
  created () {
    var box = document.getElementById('box')
    console.log('created---', box, this.number)
  },
  beforeMount () {
    var box = document.getElementById('box')
    console.log('beforeMount---', box, this.number)
  },
  mounted () {
    var box = document.getElementById('box')
    console.log('mounted---', box, this.number)
  },
  beforeUpdate () {
    var box = document.getElementById('box')
    console.log('beforeUpdate---', box, this.number)
  },
  updated () {
    var box = document.getElementById('box')
    console.log('updated---', box, this.number)
  }

看其执行打印结果

当触发 input 框输入内容时，继续执行。最终执行结果图如下

由此可知执行顺序为：beforeCreate --> created --> beforeMount --> mounted --> beforeUpdate（页面数据变动触发）--> updated
这是如上七个所列举的钩子函数的执行顺序。继续往下走

<router-link to="/">跳转</router-link>

beforeDestroy () {
  console.log('beforeDestroy')
},
destroyed () {
  console.log('destroyed')
}

当一加载本页是不会调用 beforeDestroy，destroyed 函数的。当点击跳转后，便会触发两个函数。

errorCapture
当捕获一个来自子孙组件的错误时被调用

最后看官网给出的图.

lifecycle.png

逐个分析
基于执行顺序中所发的图进行分析。

beforeCreate（创建前）：组件刚创建，DOM元素与data中的元素还未初始化，故拿不到dom与data中的数据。

created（创建后）：完成数据观测，可以在此周期中获取数据，并对数据进行渲染。但DOM元素还未加载出来。

beforeMount（载入前）：数据初始化也已经完成，数据的双向绑定还是显示{{}}，DOM还未加载完成。但已编译模板，把data里面的数据和模板生成html。

mounted（载入后）：data数据与DOM元素都已加载完成，将上个周期编译好的内容渲染到页面。

beforeUpdate（更新前）：只要是页面数据改变了都会触发。数据更新之前，页面数据还是原来的数据；如果没有数据改变不执行。

updated（更新后）：只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。

beforeDestroy（摧毁前）：在路由离开的时候执行。

destroyed（摧毁后）：在实例销毁之后调用。

errorCaptured：当捕获一个来自子孙组件的错误时被调用。

activated & deactivated：在keep-alive被包裹的组件的情况下，假设a、b两个页面，当a页面切换到b页面，则触发deactivated；回到a页面，则触发activated周期