在Vue 3中，你可以使用setInterval和setTimeout来创建定时器。这两个方法与在普通JavaScript中使用的方式基本相同。
setInterval：用于重复性地执行一个函数，按照指定的时间间隔重复调用。
1. <template> 2. <div> 3. <p>定时器示例：</p> 4. <p>{{ count }}</p> 5. </div> 6. </template> 7. 8. <script> 9. import { ref, onMounted, onUnmounted } from 'vue'; 10. 11. export default { 12. setup() { 13. const count = ref(0); 14. 15. // 创建定时器 16. let intervalId; 17. 18. // 在组件挂载时启动定时器 19. onMounted(() => { 20. intervalId = setInterval(() => { 21. count.value++; 22. }, 1000); // 1000毫秒，即1秒 23. }); 24. 25. // 在组件卸载时清除定时器，防止内存泄漏 26. onUnmounted(() => { 27. clearInterval(intervalId); 28. }); 29. 30. return { 31. count, 32. }; 33. }, 34. }; 35. </script>
在上面的例子中，我们使用ref来创建一个响应式变量count，并在setup函数中使用onMounted和onUnmounted来在组件挂载和卸载时启动和清除定时器。
setTimeout：用于在一段时间后执行一次函数。
1. <template> 2. <div> 3. <p>延时执行示例：</p> 4. <p v-if="showMessage">{{ message }}</p> 5. </div> 6. </template> 7. 8. <script> 9. import { ref, onMounted } from 'vue'; 10. 11. export default { 12. setup() { 13. const message = ref('这条消息将在5秒后显示'); 14. const showMessage = ref(false); 15. 16. // 在组件挂载时设置定时器 17. onMounted(() => { 18. setTimeout(() => { 19. showMessage.value = true; 20. }, 5000); // 5000毫秒，即5秒 21. }); 22. 23. return { 24. message, 25. showMessage, 26. }; 27. }, 28. }; 29. </script>
在上面的例子中，我们使用ref来创建响应式变量message和showMessage，并在setup函数中使用onMounted来在组件挂载时设置定时器，以便在5秒后将showMessage设置为true，从而显示消息。
这两个定时器的用法与在普通JavaScript中的用法是类似的，只是在Vue 3的组件中需要注意在适当的时机清除定时器，避免内存泄漏。
