vue页面使用多个定时器的方法

下面是关于Vue页面使用多个定时器的方法的详细攻略：

一、前置知识

在使用Vue页面多个定时器之前，需要掌握以下知识：

1. Vue.js的生命周期钩子函数：created、mounted、updated、destroyed
2. setInterval和clearInterval的用法

二、方法一：使用Vue.js的watch属性

如果在Vue组件中同时使用多个定时器，我们可以使用Vue.js提供的watch属性来监听数据的变化，从而控制定时器的启动和停止。

示例代码如下：

<template>
  <div>{{num}}</div>
</template>

<script>
export default {
  data () {
    return {
      num: 1,
      timer1: null,
      timer2: null
    }
  },
  watch: {
    num: {
      handler (val) {
       // 使用setInterval开启定时器
       this.timer1 = setInterval(() => {
         console.log('timer1')
       }, 1000)
       this.timer2 = setInterval(() => {
         console.log('timer2')
       }, 2000)
      },
      immediate: true  // 初始化组件时立即执行
    }
  },
  destroyed () {
    // 使用clearInterval清除定时器
    clearInterval(this.timer1)
    clearInterval(this.timer2)
  },
}
</script>

在上面的代码中，我们在Vue组件的data属性中定义了num、timer1和timer2三个变量。在watch属性中，我们监听了num的变化，当num变化时就会执行handler函数。在handler函数中，我们使用setInterval开启了两个定时器，并将其保存在组件的timer1和timer2变量中。在组件销毁时，使用clearInterval清除两个定时器。

三、方法二：使用Vue.js的生命周期钩子函数

Vue.js提供了多个生命周期钩子函数，可以在组件的特定生命周期中执行一些函数。我们可以在生命周期钩子函数中使用setInterval开启定时器，然后在其他生命周期函数中使用clearInterval清除定时器。

示例代码如下：

<template>
  <div>{{num}}</div>
</template>

<script>
export default {
  data () {
    return {
      num: 1,
      timer1: null,
      timer2: null
    }
  },
  created () {
    this.timer1 = setInterval(() => {
      console.log('timer1')
    }, 1000)
  },
  mounted () {
    this.timer2 = setInterval(() => {
      console.log('timer2')
    }, 2000)
  },
  updated () {
    // 更新组件时重新启动定时器
    clearInterval(this.timer1)
    this.timer1 = setInterval(() => {
      console.log('timer1')
    }, 1000)
  },
  destroyed () {
    // 使用clearInterval清除定时器
    clearInterval(this.timer1)
    clearInterval(this.timer2)
  },
}
</script>

在上面的代码中，我们在组件的created生命周期钩子函数中开启了一个定时器，每秒钟输出一次“timer1”。在mounted生命周期中也开启了一个定时器，每两秒钟输出一次“timer2”。在updated生命周期钩子函数中，我们使用clearInterval清除并重新开启了一个“timer1”定时器。在组件销毁时，使用clearInterval清除两个定时器。

以上就是使用Vue页面多个定时器的方法。通过使用watch属性或生命周期钩子函数，我们可以很方便地实现页面中多个定时器的控制。