一.生命周期钩子函数

1.什么是组件生命周期

一个组件从创建到销毁的整个过程就是生命周期

2.作用：

特定的时间点，执行某些特定的操作

3.场景:

组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

4.十个钩子函数

beforeCreate：实例刚被创建出来，data 数据和 methods 方法还未被初始化，不能访问。用于初始化变量。
created：可以访问 data 数据和 methods 方法，不能访问 DOM 节点。用于 ajax 和页面初始化。
beforeMount：虚拟 DOM 已经创建，但是还未挂载到真实节点，可以在挂载之前更改数据。
mounted：可以访问 DOM 节点。
beforeUpdate：状态更新之前执行，页面还未渲染。
updated：页面渲染更新完成。
beforeDestroy：实例摧毁前调用，这时还可以使用实例。
destroyed：实例摧毁后调用。
activated：该钩子在服务器端渲染期间不被调用，在 DOM 节点挂载后和数据更新前调用。运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，如果写在 created 或 mounted 中就只会在首次加载该组件时调用。
deactivated：keep-alive组件停用时调用。

其中 activated 和 deactivated 是独有的钩子函数。也就是只有使用了 keep-alive 组件后才会有。包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在内部被切换时，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

当使用了，页面初始化时，生命周期的执行顺序为 created -> mounted -> activated，退出或关闭页面时触发 deactivated。当再次进入（前进或者后退）时，只触发 activated。

只执行一次的事件放在 mounted 中；每次进入页面都要执行的事件放在 activated 中。

5.下图展示了实例的生命周期

这张图很重要,大家要深深记住它

二. 父子组件的钩子函数执行前后顺序

父组件

export default {
  name: 'app',
  components: {
    Child
  },
  beforeCreate() {
      console.log('父组件组件beforeCreate')
  },
  created() {
      console.log('父组件created')
  },
  beforeMount() {
      console.log('父组件beforeMount')
  },
  mounted() {
      console.log('父组件mounted')
  },
  beforeDestroy() {
      console.log('父组件beforeDestroy')
  },
  destroyed() {
      console.log('父组件destroyed')
  },
}

子组件

export default {
  name: 'Child',
  props: {
    msg: String
  },

  beforeCreate() {
      console.log('子组件组件beforeCreate')
  },
  created() {
      console.log('子组件组件created')
  },
  beforeMount() {
      console.log('子组件组件beforeMount')
  },
  mounted() {
      console.log('子组件组件mounted')
  },
  beforeDestroy() {
      console.log('子组件组件beforeDestroy')
  },
  destroyed() {
      console.log('子组件组件destroyed')
  },
}

父组件执行beforeMount以后执行子组件的beforeCreate，由于父组件要将子组件的数据页渲染到父组件的页面上，须要先加载出子组件的数据，因此在执行父组件的mounted钩子函数以前，须要将子组件的钩子函数beforeCreate，created，beforeMount，mounted执行完毕，这样数据都能渲染到页面上，不会出现白屏的现象。

1.渲染过程

子组件挂载完成后，父组件才挂载，所以挂载顺序是：

父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted

2.子组件更新过程

影响到父组件的顺序为：
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到父组件的顺序为：
子组件 beforeUpdate -> 子组件 updated

3.父组件更新过程

影响到子组件的顺序为：
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到子组件的顺序为：
父组件 beforeUpdate -> 父组件 updated

4.销毁过程

父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

三.总结

子的生命周期都会被先结束，父的才结束。先由父到子，再从子到父。
生命周期遵从“从外到内，再从内到外，mixins先于组件”的原则。

生命周期钩子函数的地位在vue中,可以说是举足轻重