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

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

阅读时间预估:5分钟

什么是生命周期?

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

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

官方传送门

vue生命周期

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是Vue中规定好的！

钩子函数 - beforeCreate()

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

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期 - 参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - 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 () {
    // &emsp;可以看到此时是给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);
    // &emsp;beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用,可以用于清除定时器
  },
  destory () {
   //调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  },

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

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

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

猛戳我点星星