Vue生命周期实例分析总结

生命周期钩子函数

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、销毁等一系列过程，我们称这是Vue的生命周期，通常也称为生命周期钩子函数。生命周期钩子函数包含如下几个阶段：

1. beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。

2. created：实例已经在内存中创建完成，此时 data 和 methods 已经创建完成，此时还没有开始编译模板。

3. beforeMount：此时，模板已经在内存中编译完成，但还没有挂载到页面中。

4. mounted：此时，模板已经挂载到了页面中，喜提$el 属性

5. beforeUpdate：组件内部数据有变化，Vue 将要立即重新渲染虚拟 DOM 并应用更新。此时还没有开始重新渲染。

6. updated：Vue 已经重新渲染并更新了虚拟 DOM 中的元素。此时组件更新完成。

7. beforeDestroy：Vue实例销毁之前回调该方法，通常在这个钩子函数里面可以进行一些收尾工作，比如清除定时器。

8. destroyed：Vue实例销毁之后调用该方法，销毁完毕的Vue实例。

实例分析

下面我们来运用钩子函数的知识来进行实例分析：

实例1

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  beforeCreate () {
    console.log('在 Vue 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。')
  },
  created () {
    console.log('在实例创建完成后被立即调用。在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前还不存在')
  },
  beforeMount () {
    console.log('在挂载开始之前被调用：相关的 render 函数首次被调用。')
  },
  mounted () {
    console.log('在挂载完成后被调用，即dom挂载完成后调用该函数。此时，组件已经显示在页面中.')
  },
  beforeUpdate () {
    console.log('在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。')
  },
  updated () {
    console.log('在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后立即调用。')
  },
  beforeDestroy() {
    console.log('在实例销毁之前调用。这一步，实例仍然完全可用。')
  },
  destroyed () {
    console.log('在实例销毁之后调用。')
  }
}
</script>

当我们运行以上代码，控制台输出的内容如下：

在 Vue 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
在实例创建完成后被立即调用。在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前还不存在
在挂载开始之前被调用：相关的 render 函数首次被调用。
在挂载完成后被调用，即dom挂载完成后调用该函数。此时，组件已经显示在页面中.

可见，控制台首先输出了 beforeCreate 的内容，说明在实例创建的初始化阶段，beforeCreate函数被调用。接着输出了 created 的内容，说明在实例创建完成之后，实例完成了对数据、属性、方法的配置等工作。接着输出了 beforeMount 的内容，说明挂载前相关的render函数被调用。最后输出 mounted 的内容，说明实例挂载完成，组件已经显示在页面中。

实例2

下面，我们再举一个例子。

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  beforeCreate () {
    console.log('在 Vue 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。')
  },
  created () {
    console.log('在实例创建完成后被立即调用。在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前还不存在')
  },
  beforeMount () {
    console.log('在挂载开始之前被调用：相关的 render 函数首次被调用。')
  },
  mounted () {
    console.log('在挂载完成后被调用，即dom挂载完成后调用该函数。此时，组件已经显示在页面中.')
  },
  beforeUpdate () {
    console.log('在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。')
  },
  updated () {
    console.log('在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后立即调用。')
  },
  beforeDestroy() {
    console.log('在实例销毁之前调用。这一步，实例仍然完全可用。')
  },
  destroyed () {
    console.log('在实例销毁之后调用。')
  }
}
</script>

当我们运行以上代码，控制台输出的内容如下：

在 Vue 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
在实例创建完成后被立即调用。在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前还不存在
在挂载开始之前被调用：相关的 render 函数首次被调用。
在挂载完成后被调用，即dom挂载完成后调用该函数。此时，组件已经显示在页面中.
在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后立即调用。
在实例销毁之前调用。这一步，实例仍然完全可用。
在实例销毁之后调用。

这个例子和第一个例子做了相同的事情，不过多了几个生命周期。

输出了 beforeUpdate 的内容，说明在数据更新之前调用了beforeUpdate函数。最后输出 destroyed的内容，说明实例被销毁了。