Vue：beforeCreate和created生命周期函数的特点

在写好一个组件时，并没有创建Vue的实例，在一个组件中通过标签去使用该组件时，才相当于创建了Vue实例，这个创建的过程是一瞬间的。

在创建Vue实例的时候，第一件事要做的就是初始化事件和生命周期函数（第一个绿色的框），当事件和生命周期函数都被初始化好以后，就会立即执行函数：beforeCreate(){}

而此阶段的data、methods、props还未被创建，无法使用，如果使用则报错

代码演示（MyMain.vue组件）：

<template>
  <div class="my_main">MyMain组件</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '华为荣耀9Pro成交额是3000+'
    }
  },
  methods: {
    show() {
      console.log('显示方法')
    }
  },
  // 最终会报错
  beforeCreate() {
    console.log(this.msg)
    this.show()
  }
</script>

当执行完beforeCreate函数后，紧接着就会执行下一个环节：初始化props、data、methods，但此时页面的模板还未创建好

当初始化props、data、methods完毕后，就会立即执行ceated(){}函数
代码演示（MyMain.vue组件）：

<template>
  <div class="my_main">MyMain组件</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '华为荣耀9Pro成交额是3000+'
    }
  },
  methods: {
    show() {
      console.log('显示方法')
    }
  },
  // 会正常输出结果
  created() {
    console.log(this.msg)
    this.show()
  }
}
</script>

> created生命周期函数非常重要，在函数里可以使用ajax发请求获取数据