在 Vue 3 中使用 JavaScript 原生的定时器函数 setIntervalsetTimeout 来创建定时器。例如,要在 Vue 组件中创建一个每隔 1 秒钟更新一次的计时器,可以使用如下的代码:

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

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

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

    onUnmounted(() => {
      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)
}
Logo

前往低代码交流专区

更多推荐