Vue——神秘的生命周期

从Vue的生命周期入手是尝试快速理解Vue应用的一条捷径，那么Vue在生命周期中都做了哪些操作呢？话不多说，直接上代码，感兴趣的小伙伴可以跟着敲一敲，希望直接看结论的请自行滑动至末尾。

VUE文件

<template>
    <div class="life-cycle" @click="changeMessage">
        {{message}}
    </div>
</template>
<script src="./life.js">

</script>

<style lang="less">
.life-cycle {
    position: absolute;
    top: 50%;
    left: 50%;
    
}
</style>

JS文件

export default {
  data () {
    return {
      loads: this.loadData(),
      message: 'xuxiao is boy'
    }
  },
  props: {
    pro: ['string', 'number']
  },
  methods: {
    loadData () {
      console.log('%c%s', 'color:red', 'methods   : 准备完毕,加载Data依赖')
      return 1
    },
    changeMessage () {
      this.message = 'changed message'
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate 创建前状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('beforeCreate 创建前状态结束===============》')
    /* console.group('beforeCreate 创建前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) // undefined
    console.log('%c%s', 'color:red', 'props  : ' + this.$props) // undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) // undefined
    console.log('%c%s', 'color:red', 'attrs   : ' + this.$attrs) // 已被初始化
    console.log('%c%s', 'color:red', 'listeners   : ' + this.$listeners) // 已被初始化
    console.log('%c%s', 'color:red', 'emit   : ' + this.$emit) // 已被初始化
    console.log('%c%s', 'color:red', 'on   : ' + this.$on) // 已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) */
  },
  created: function () {
    console.log('created 创建完毕状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('created 创建完毕状态结束===============》')
    /* console.group('created 创建完毕状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) // undefined
    console.log('%c%s', 'color:red', 'props  : ' + this.$props) // 已被初始化
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) // 已被初始化
    console.log('%c%s', 'color:red', 'attrs   : ' + this.$attrs) // 已被初始化
    console.log('%c%s', 'color:red', 'listeners   : ' + this.$listeners) // 已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
  },
  beforeMount: function () {
    console.log('beforeMount 挂载前状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('beforeMount 挂载前状态结束===============》')
    /* console.group('beforeMount 挂载前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el)) // 已被初始化
    console.log('%c%s', 'color:red', 'props  : ' + this.$props) // 已被初始化
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) // 已被初始化
    console.log('%c%s', 'color:red', 'attrs   : ' + this.$attrs) // 已被初始化
    console.log('%c%s', 'color:red', 'listeners   : ' + this.$listeners) // 已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
  },
  mounted: function () {
    console.log('mounted 挂载结束状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('mounted 挂载结束状态结束===============》')
    /* console.group('mounted 挂载结束状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) // 已被初始化
    console.log('%c%s', 'color:red', 'props  : ' + this.$props) // 已被初始化
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) // 已被初始化
    console.log('%c%s', 'color:red', 'attrs   : ' + this.$attrs) // 已被初始化
    console.log('%c%s', 'color:red', 'listeners   : ' + this.$listeners) // 已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
  },
  beforeUpdate: function () {
    console.log('beforeUpdate 更新前状态开始===============》')
    console.table([
      ['el', `${this.$el.innerHTML}`],
      ['props', `${this.$props}`],
      ['data', `${JSON.stringify(this.$data)}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('beforeUpdate 更新前状态结束===============》')
    /* console.group('beforeUpdate 更新前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el.innerHTML)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + JSON.stringify(this.$data))
    console.log('%c%s', 'color:red', 'message: ' + this.message)
    console.groupEnd() */
  },
  updated: function () {
    console.log('updated 更新完成状态开始===============》')
    console.table([
      ['el', `${this.$el.innerHTML}`],
      ['props', `${this.$props}`],
      ['data', `${JSON.stringify(this.$data)}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('updated 更新完成状态结束===============》')
    /* console.group('updated 更新完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el.innerHTML)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + JSON.stringify(this.$data))
    console.log('%c%s', 'color:red', 'message: ' + this.message)
    console.groupEnd() */
  },
  beforeDestroy: function () {
    console.log('beforeDestroy 销毁前状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('beforeDestroy 销毁前状态结束===============》')
    /* console.group('beforeDestroy 销毁前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message) */
  },
  destroyed: function () {
    console.log('destroyed 销毁完成状态开始===============》')
    console.table([
      ['el', `${this.$el}`],
      ['props', `${this.$props}`],
      ['data', `${this.$data}`],
      ['attrs', `${this.$attrs}`],
      ['listeners', `${this.$listeners}`],
      ['message', `${this.message}`]])
    console.log('destroyed 销毁完成状态结束===============》')
    /* console.group('destroyed 销毁完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message) */
  }
}

说明，JS文件中有两种查看方式，个人感觉table更加直观，喜欢用group的小伙伴请自行切换

console结果

结论：

1、$attrs、$listeners会在beforeCreate中准备好

2、methods中的函数会在beforeCreate之后created之前准备好

3、data和props会在created中准备好

4、在mounted中$el才会定义

5、在beforeUpdate中data已经更新但是$el还没有