vue生命周期详解和使用场景整理

我们从vue的原理上来理解一下vue的生命周期，以及使用场景（使用场景应该试很多新手同学比较懵的地方），建议有条件的同学可以看一下vue源码，更能深入理解。
不看源码的同学也没有关系，我们从业务场景切入，尽量讲清楚它的用法。

beforeCreate: function() {
    console.group("------beforeCreate创建前状态------");
    console.log("%c%s", "color:red", "el     : " + this); 
    console.log(this.$el);
    console.log("%c%s", "color:red", "el     : " + this.$el); 
    console.log("%c%s", "color:red", "data   : " + this.$data); 
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  created: function() {
    console.group("------created创建完毕状态------");
    console.log(this.$el);
    console.log("%c%s", "color:red", "el     : " + this.$el); 
    console.log("%c%s", "color:red", "data   : " + this.$data); 
    console.log("%c%s", "color:red", "message: " + this.message); 
  },
  beforeMount: function() {
    console.group("------beforeMount挂载前状态------");
    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); 
  },
  mounted: function() {
    console.group("------mounted 挂载结束状态------");
    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); 
  },
  beforeUpdate: function() {
    console.group("beforeUpdate 更新前状态===============》");
    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);
  },
  updated: function() {
    console.group("updated 更新完成状态===============》");
    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);
  },
  beforeDestroy: function() {
    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.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);
  }

1、beforeCreate()

init()执行后，初始化后，创建前，这时候我们是访问不到data当中的属性以及methods当中的属性和方法。我们可以在这里做一个loading，等加载页面完成（也就是后面说的mounted()后）再销毁这个loading。

2、created()

创建后，在这里我们已经可以访问到data和methods，这是用的最多的一个生命钩子函数之一。在这里，会对data的属性进行遍历，给每个属性都加上getter、和setter，使得data变成响应式的数据。有条件的同学可以去深入了解一下响应式原理。
我们通常在这里进行前后端的数据交互，关于数据交互，传送门axios。

3、beforeMount()

挂载前，在这里可以对数据进行最后的修改，也可以在这里向后端获取数据，不过不推荐，一样都是在created()获取，说实话，这个钩子函数我很少用。

4、mounted()

挂载后，这里完成，数据已经挂载到DOM上了，页面也已经渲染出来了。
这时，我们可以在这里获取到DOM节点了。我们还可以在这个生命周期做一下数据更新的操作，不过少用。

5、beforeUpdate()

数据改变会触发这个生命周期，但是还没没有挂载到DOM上。
在这里我们可以对数据进行检测，做数据挂载前的最后修改。

6、updatef()

数据更新并且挂载后，这时可以获取到更新后的DOM节点，做相应的一些操作了。

7、beforeDestroy()

实例销毁之前，页面离开前。在这里还可以获取到实例，可以做一些事件解绑、清楚定时器的操作。

8、destroy()

实例销毁后，这是vue就和页面断开了，获取不到vue实例。