vue3 定时调用函数

在Vue 3中，可以使用`setInterval`函数来实现定时调用函数的功能。`setInterval`函数是JavaScript提供的一个全局函数，用于按照指定的时间间隔重复执行指定的函数。

下面是一个示例代码，演示了如何在Vue 3中使用`setInterval`函数进行定时调用函数：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    
    // 定义定时器变量
    let timer;

    // 在组件挂载时启动定时器
    onMounted(() => {
      timer = setInterval(() => {
        // 每隔1秒更新message的值
        message.value = 'Hello, Vue 3! (Updated)';
      }, 1000);
    });

    // 在组件卸载时清除定时器
    onUnmounted(() => {
      clearInterval(timer);
    });

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

在上述代码中，我们使用了Vue 3提供的`ref`函数来创建响应式数据`message`，并在组件的`setup`函数中定义了一个定时器变量`timer`。在组件挂载时，我们使用`onMounted`钩子函数启动定时器，并在每隔1秒的间隔内更新`message`的值。在组件卸载时，我们使用`onUnmounted`钩子函数清除定时器，以防止内存泄漏。

这样，每隔1秒，页面上的`message`值就会更新一次。