一.描述

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁

beforeCreate

  1.  实例、组件通过`new Vue()`创建出来之后会初始化事件和生命周期，然后就会执行`beforeCreate`钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

creared

挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里同步更改数据不会触发updated函数，一般可以在这里做初始数据的获取。 做异步ajax，绑定初始化事件

beforeMount

接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，这是在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始化数据的获取

mounted

接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…

beforeUpdate

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

undated

当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的dom

beforeDestory

当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

destoryed

组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

二.图示

Vue生命周期钩子函数 - 图1

三.调用时机

组件生命周期 hook 在组件树中的调用时机
先直接看一个例子：

  1. import Vue from 'vue';
  2. Vue.component('Test', {
  3.   props: {
  4.     name: String
  5.   },
  6.   template: `<div class="test">{{ name }}</div>`,
  7.   beforeCreate() {
  8.     console.log('Test beforeCreate');
  9.   },
  10.   created() {
  11.     console.log('Test created');
  12.   },
  13.   mounted() {
  14.     console.log('Test mounted');
  15.   },
  16.   beforeDestroy() {
  17.     console.log('Test beforeDestroy');
  18.   },
  19.   destroyed() {
  20.     console.log('Test destroyed');
  21.   },
  22.   beforeUpdate() {
  23.     console.log('Test beforeUpdate');
  24.   },
  25.   updated() {
  26.     console.log('Test updated');
  27.   }
  28. });
  29. Vue.component('Test1', {
  30.   props: {
  31.     name: String
  32.   },
  33.   template: '<div class="test1"><slot />{{ name }}</div>',
  34.   beforeCreate() {
  35.     console.log('Test1 beforeCreate');
  36.   },
  37.   created() {
  38.     console.log('Test1 created');
  39.   },
  40.   mounted() {
  41.     console.log('Test1 mounted');
  42.   },
  43.   beforeDestroy() {
  44.     console.log('Test1 beforeDestroy');
  45.   },
  46.   destroyed() {
  47.     console.log('Test1 destroyed');
  48.   },
  49.   beforeUpdate() {
  50.     console.log('Test1 beforeUpdate');
  51.   },
  52.   updated() {
  53.     console.log('Test1 updated');
  54.   }
  55. });
  56. new Vue({
  57.   el: '#app',
  58.   data() {
  59.     return {
  60.       a: true,
  61.       name: ''
  62.     };
  63.   },
  64.   mounted() {
  65.     setTimeout(() => {
  66.       console.log('-----------');
  67.       this.name = 'yibuyisheng1';
  68.       this.$nextTick(() => {
  69.         console.log('-----------');
  70.       });
  71.     }, 1000);
  72.     setTimeout(() => {
  73.       console.log('-----------');
  74.       this.a = false;
  75.       this.$nextTick(() => {
  76.         console.log('-----------');
  77.       });
  78.     }, 2000);
  79.   },
  80.   template: '<Test1 v-if="a" :name="name"><Test :name="name" /></Test1><span v-else></span>'
  81. });

运行这个例子，会发现输出如下：

  1. Test1 beforeCreate
  2. Test1 created
  3. Test beforeCreate
  4. Test created
  5. Test mounted
  6. Test1 mounted
  7. -----------
  8. Test1 beforeUpdate
  9. Test beforeUpdate
  10. Test updated
  11. Test1 updated
  12. -----------
  13. -----------
  14. Test1 beforeDestroy
  15. Test beforeDestroy
  16. Test destroyed
  17. Test1 destroyed
  18. -----------

很清楚地可以看到，各个钩子函数在组件树中调用的先后顺序。

四.对照DOM事件的捕获和冒泡

实际上，此处可以对照 DOM 事件的捕获和冒泡过程来看：

beforeCreate 、 created 、 beforeUpdate 、 beforeDestroy 是在“捕获”过程中调用的；
mounted 、 updated 、 destroyed 是在“冒泡”过程中调用的。
同时，可以看到，在初始化流程、 update 流程和销毁流程中，子级的相应声明周期方法都是在父级相应周期方法之间调用的。比如子级的初始化钩子函数（ beforeCreate 、 created 、 mounted ）都是在父级的 created 和 mounted 之间调用的，这实际上说明等到子级准备好了，父级才会将自己挂载到上一层 DOM 树中去，从而保证界面上不会闪现脏数据。