Vue 生命周期和定时器使用

前言

• Vue 实例在被创建时都要经过一系列的初始化过程同时在这个过程中也会运行一些叫做生命周期的函数。-

• Vue生命周期函数就是vue实例在某一个时间点会自动执行的函数。

• Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

• 定时器也是常用，在一段时间内执行某件事情，用处也是比较广泛的

Vue八大生命周期

1.beforeCreate（创建前）

data，computed，watch，methods 上的方法和数据均不能访问，注：date和methods的数据都还未初始 化。

2.created （创建后）

data、props、computed的初始化导入完成， 注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作

3.beforeMount (载入前)

模板已经在内存中编译好了，但是未挂载到页面中，（页面还是旧的）

4.mounted （载入后）

只要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离里了创建阶段， 进入到了运行阶段。

5.beforeUpdate （更新前）

当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时date数据是最新的，页面尚未和最新数据数据保持同步。但是DOM中的数据会改变，这是vue双向数据绑定的作用，可在更新前访问现有的DOM，如手动移出添加的事件监听器。

6.updated （更新后）

执行时数据已经保持同步了，都是最新的，不要在此函数中操作数据（修改属性），否则就会陷入死循环。

7.beforeDestroy（ 销毁前）

date和methods以及过滤器和指令都是处于可用状态，此时还没有真正的执行销毁过程。清除定时器

8.destroyed （销毁后）

组件已经完全销毁（渣都不剩），此时组件中的所有的数据，方法，指令，过滤器...都已经销毁（不可用了）。

定时器使用

setTimeout() 间隔一定时间(单位毫秒)只会执行一次，返回值是一个number类型的值 清除定时器要使用clearTimeout()

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(()=> {
  console.log('只会执行一次');
}, 1000);
​
// 清除定时器
clearTimeout(timerId);

setInterval() 每间隔一段时间不间断的一直执行下去 设置定时器是setInterval()，会返回一个number类型的值，清除定时器要使用clearInterval()

<template>
</template>
​
<script>
export default {
  data() {
    return {
      // 定时器
      time:0
    }
  },
    created: {
    this.timing ()
    }
  //生命周期 销毁前执行
  beforeDestroy() { 
   // 不销毁会在其他页面也执行，浪费性能
    clearInterval(this.time)
    this.time = null
  },
  methods: {
    // 定时器测试
    timing () {
      this.time = setInterval(()=>{
          console.log('一直执行的定时器');
      },1000)
    },
}
</script>

​

---

总结：

经过这一趟流程下来相信你也对 Vue 生命周期和定时器使用 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕