vue3中的定时器_代码007(未授权)

本文介绍: 而是通过参数的形式传递给你，如果你需要在定时器中访问组件实例的属性或方法，需要将。在 Vue 3 中使用 Jav aScri p t 原生的定时器函数。函数创建一个每秒钟增加一次计数器的定时器，并将其返回的。函数创建一个响应式的计数器变量。另外要注意一点，Vue 3 中的。函数在组件销毁时清除定时器。

在 Vue 3 中使用 Jav aSc rip t 原生的定时器函数 setInterval 和 setTimeout 来创建定时器。例如，要在 Vue 组件中创建一个每隔 1 秒钟更新一次的计时器，可以使用如下的代码：

import { onMounted, onUnmounted, ref } from "vue";

export default {
  setup() {
    const counter = ref(0);

    const intervalId = setInterval(() =&gt; {
      counter.value++;
    }, 1000);

    onUnmounted(() =&gt; {
      clearInterval(intervalId);
    });

    return {
      counter,
    };
  },
};

这里使用 ref 函数创建一个响应式的计数器变量 counter，然后使用 setInterval 函数创建一个每秒钟增加一次计数器的定时器，并将其返回的 intervalId 存储到变量中。最后，使用 onUnmounted 函数在组件销毁时清除定时器。

另外要注意一点，Vue 3 中的 setup 函数不会自动绑定 this，而是通过参数的形式传递给你，如果你需要在定时器中访问组件实例的属性或方法，需要将 this 作为参数传递进去。例如：

setup(props, { emit, ctx }) {    
    const intervalId = setInterval(function() {
        console.log('this.count:', ctx.attrs.count); // 访问组件属性
        console.log('this.getData():', ctx.root.$refs.demo.getData()); // 访问组件方法
    }.bind(this), 1000)
}