我们从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实例。

Logo

前往低代码交流专区

更多推荐