beforeCreate

  beforeCreate() {
    console.log("beforeCreate");
    console.log(this.$el); //undefined
    console.log(this.$data); //undefined
  },

beforeCreate时没有挂载el，也没有data对象

created

  created() {
    console.log("created");
    console.log(this.$el);
    console.log(this.$data);
  },

图片说明

created时没有挂载el，有data对象

  beforeMount() {
    console.log("beforeMount");
    console.log(this.$el);
    console.log(this.$data);
  },

图片说明

beforeMount时没有挂载el，有data对象,仍然是虚拟DOM

  mounted() {
    console.log("mounted");
    console.log(this.$el);
    console.log(this.$data);
  },

图片说明
mounted时el已挂载，有data对象
　在mounted之前p中还是通过{{message}}进行占位的，因为此时还没有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
在beforeUpdate可以监听到data的变化，但是view层没有被重新渲染，view层的数据没有变化。等到updated的时候，view层才被重新渲染，数据更新。

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件***会被移除，所有的子实例也会被销毁。

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed