阅读 907

Vue从甜小白到皮大佬系列(三) 生命周期

🎉 Vue构建大型单页面电商应用 开源啦!点我看源码🚀🚀

阅读时间预估:5分钟

什么是生命周期?

生命周期是指一个事物从生到死的过程,软件也一样,每个语言都有其生命周期,从出生到死亡,每个阶段做每个阶段应该做的事情,简单说:一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期。

例如面前这位大侠,既然是小白那么就要苦练基本功,千里之行始于足下,万层高楼,平地起,相信在持续的努力中会有所进步,废话不多说直接上干货。

官方传送门

vue生命周期

  • 生命周期钩子函数的定义:从组件被创建,到组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着组件各种各样的事件,这些事件,统称为组件的生命周期函数!

  • 注意:Vue在执行过程中会自动调用生命周期钩子函数,我们只需要提供这些钩子函数即可

  • 注意:钩子函数的名称都是Vue中规定好的!

Vue的生命周期

钩子函数 - beforeCreate()

  • 说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  • 注意:此时,无法获取 data中的数据、methods中的方法

钩子函数 - created()

钩子函数 - beforeMounted()

  • 说明:在挂载开始之前被调用

钩子函数 - mounted()

  • 说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作

钩子函数 - beforeUpdated()

  • 说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  • 注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

钩子函数 - updated()

  • 说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

  • 说明:实例销毁之前调用。在这一步,实例仍然完全可用。
  • 使用场景:实例销毁之前,执行清理任务,比如:清除定时器等

钩子函数 - destroyed()

  • 说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

说了这么多来点实在的,大佬一般如何在代码中合理的利用生命周期来构建代码呢?

  beforeCreate () {
   // 进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)。注意:此时还是没有el选项
  },
  components: {},
  data () {
    return {
      show: false,
      msg: "hello word",
      mg: "你好世界"
    }
  },
  watch: {

  },
  methods: {
    destory () {
        // 调用销毁
      this.$destroy();
    }
  },
  created () {
    // 在这一阶段发生的事情还是比较多的。首先,会判断对象是否有el选项:如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)
  },
  beforeMount () {
    //  可以看到此时是给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。
  },
  mounted () {
    this.intervalID = setInterval(() => {
      console.log("++++++-------++++");
      this.show = !this.show;
    }, 1000);
   // 在mounted之前p中还是通过{{message}}进行占位的,因为此时还没有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。
  },

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

  beforeDestory () {
    clearInterval(this.intervalID);
    //  beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用,可以用于清除定时器
  },
  destory () {
   //调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  },
复制代码

看完这篇不知道面前的这位大侠是否真正的领略到vue生命周期的厉害之处,一定要多用多理解每个生命节点都能干啥,别在错误的节点干错误的事,例如面前这位大侠,此时正是年轻有为之时,一定要脚踏实地,珍惜时间,充实自己,切勿,坐享其成,好高骛远哦!加油,前端甜小白....

如果我的分享对面前的这位大侠有所启发,恳请以程序员最高礼遇点✨ 星评论加分享的方式鼓励我.

关注公众号回复:学习 领取前端最新最全学习资料,也可以进群和大佬一起学习交流

猛戳我点星星

关注下面的标签,发现更多相似文章
评论