Vue3中的setInterval|极客教程

Vue3中的setInterval

在Vue3中，我们经常需要定时更新组件中的数据或执行一些定时操作。setInterval是一个常见的定时器方法，可以用来定时执行一个指定的函数或代码块。在Vue3中，我们可以通过自定义指令或组件的方式来使用setInterval。

使用自定义指令

我们可以通过自定义指令的方式来在Vue3中实现类似setInterval的定时器功能。首先，我们需要创建一个自定义指令，然后在需要使用定时器的地方将该指令引入。

创建自定义指令

我们可以在Vue3的setup函数中用onMounted来创建一个定时器，并在onUnmounted中清除定时器：

import { onMounted, onUnmounted } from 'vue';

const useInterval = (callback, delay) => {
  let timer;

  const start = () => {
    timer = setInterval(callback, delay);
  }

  const stop = () => {
    clearInterval(timer);
  }

  onMounted(() => {
    start();
  });

  onUnmounted(() => {
    stop();
  });
}

export default useInterval;

在组件中使用自定义指令

在需要使用定时器的组件中引入自定义指令，并调用它：

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

<script>
import useInterval from '../directives/useInterval';

export default {
  setup() {
    let count = ref(0);

    useInterval(() => {
      count.value++;
    }, 1000);

    return { count };
  }
}
</script>

上面的示例中，我们在组件中引入了自定义指令useInterval，并在setup函数中调用它，实现了每隔一秒更新count变量的功能。

使用组件

除了自定义指令的方式，我们还可以通过组件的方式来实现定时器功能。我们可以创建一个带有定时器功能的组件，在需要使用的地方引入并使用该组件。

创建定时器组件

我们可以创建一个定时器组件，将定时器逻辑封装在这个组件内部：

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count++;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

在父组件中使用定时器组件

在需要使用定时器的父组件中引入定时器组件，并像使用普通组件一样使用它：

<template>
  <div>
    <TimerComponent />
  </div>
</template>

<script>
import TimerComponent from '../components/TimerComponent.vue';

export default {
  components: {
    TimerComponent
  }
}
</script>