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 () {
    //  能够看到此时是给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生命周期的厉害之处,必定要多用多理解每一个生命节点都能干啥,别在错误的节点干错误的事,例如面前这位大侠,此时正是年轻有为之时,必定要脚踏实地,珍惜时间,充实本身,切勿,不劳而获,好高骛远哦!加油,前端甜小白....

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

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

猛戳我点星星