vue3怎么同时定义三个定时器分别为10秒，20秒，30秒，前端根据弹窗页面选择后点击执行按钮执行对应定时器或点击取消按钮不执行，使用ref方法和script setup里面编写，功能和弹窗在子组件中，在父组件只有点击按钮，并且点击其他页面的时候该刷新功能自动停止

你可以使用 `setInterval` 函数来创建定时器，然后使用 `clearInterval` 函数来清除定时器。为了同时定义三个定时器，你可以在 `setup` 函数中使用 `ref` 来定义三个变量来保存定时器的 ID，然后在对应的时间间隔内执行相应的操作。

下面是一个示例代码，其中包含了三个定时器，分别为 10 秒、20 秒和 30 秒，以及一个用于控制弹窗显示的变量 `showPopup`：

<template>
  <div>
    <button @click="startTimer(1)">Start Timer 1</button>
    <button @click="startTimer(2)">Start Timer 2</button>
    <button @click="startTimer(3)">Start Timer 3</button>
    <button @click="stopTimer">Stop Timer</button>

    <div v-if="showPopup">
      <h2>Popup</h2>
      <button @click="hidePopup">Cancel</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const timer1 = ref(null)
const timer2 = ref(null)
const timer3 = ref(null)
const showPopup = ref(false)

const startTimer = (id) => {
  if (id === 1) {
    timer1.value = setInterval(() => {
      console.log('Timer 1')
    }, 10000)
  } else if (id === 2) {
    timer2.value = setInterval(() => {
      console.log('Timer 2')
    }, 20000)
  } else if (id === 3) {
    timer3.value = setInterval(() => {
      console.log('Timer 3')
    }, 30000)
  }
}

const stopTimer = () => {
  clearInterval(timer1.value)
  clearInterval(timer2.value)
  clearInterval(timer3.value)
}

const showPopup = () => {
  showPopup.value = true
}

const hidePopup = () => {
  showPopup.value = false
}

onMounted(() => {
  // 在页面刷新或离开时停止定时器
  window.addEventListener('beforeunload', stopTimer)
})

onUnmounted(() => {
  window.removeEventListener('beforeunload', stopTimer)
})
</script>

在上面的代码中，我们使用了 `onMounted` 和 `onUnmounted` 钩子函数来在页面加载和卸载时分别进行一些操作。在页面加载时，我们添加了一个监听器来在页面刷新或离开时停止定时器。

当点击开始按钮时，我们使用 `startTimer` 函数来启动对应的定时器，当点击停止按钮时，我们使用 `stopTimer` 函数来停止所有定时器。当点击弹窗上的取消按钮时，我们使用 `hidePopup` 函数来隐藏弹窗。

请注意，上面的代码仅为示例，你需要根据具体需求进行修改。