vue3定时器

在Vue 3中，你可以使用setInterval和setTimeout来创建定时器。这两个方法与在普通JavaScript中使用的方式基本相同。

setInterval：用于重复性地执行一个函数，按照指定的时间间隔重复调用。

<template>
  <div>
    <p>定时器示例：</p>
    <p>{{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    
    // 创建定时器
    let intervalId;

    // 在组件挂载时启动定时器
    onMounted(() => {
      intervalId = setInterval(() => {
        count.value++;
      }, 1000); // 1000毫秒，即1秒
    });

    // 在组件卸载时清除定时器，防止内存泄漏
    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      count,
    };
  },
};
</script>

在上面的例子中，我们使用ref来创建一个响应式变量count，并在setup函数中使用onMounted和onUnmounted来在组件挂载和卸载时启动和清除定时器。

setTimeout：用于在一段时间后执行一次函数。

<template>
  <div>
    <p>延时执行示例：</p>
    <p v-if="showMessage">{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('这条消息将在5秒后显示');
    const showMessage = ref(false);

    // 在组件挂载时设置定时器
    onMounted(() => {
      setTimeout(() => {
        showMessage.value = true;
      }, 5000); // 5000毫秒，即5秒
    });

    return {
      message,
      showMessage,
    };
  },
};
</script>

在上面的例子中，我们使用ref来创建响应式变量message和showMessage，并在setup函数中使用onMounted来在组件挂载时设置定时器，以便在5秒后将showMessage设置为true，从而显示消息。

这两个定时器的用法与在普通JavaScript中的用法是类似的，只是在Vue 3的组件中需要注意在适当的时机清除定时器，避免内存泄漏。