Как остановить setInterval в vue 3 watch?

В Vue.js 3 для остановки функции, запущенной с помощью setInterval, в блоке watch вы можете использовать функцию clearInterval(). Вот подробное объяснение шагов по остановке setInterval в блоке watch в Vue.js 3:

1. Импортировать функцию clearInterval из JavaScript:

import { clearInterval } from 'timers';

2. Создайте переменную, которая будет хранить идентификатор setInterval в блоке watch:

data() {
  return {
    intervalId: null
  }
},

3. Внутри вашего метода/блока watch запускайте setInterval и сохраняйте идентификатор в переменную:

watch: {
  myData() {
    this.intervalId = setInterval(() => {
      // Тут ваш код
    }, 1000);
  }
}

4. Добавьте блок immediate: true, если вы хотите, чтобы функция, запущенная с помощью setInterval, выполнилась сразу после установки наблюдателя, прежде чем начать интервалы:

watch: {
  myData: {
    immediate: true,
    handler() {
      this.intervalId = setInterval(() => {
        // Тут ваш код
      }, 1000);
    }
  }
}

5. Чтобы остановить setInterval, вызовите функцию clearInterval, передав идентификатор интервала:

methods: {
  stopInterval() {
    clearInterval(this.intervalId);
  }
}

Вы можете вызвать функцию stopInterval() в любой части вашего кода, чтобы остановить setInterval, например, при уничтожении компонента или при срабатывании определенного условия.

Вот и все! Теперь вы знаете, как остановить setInterval в блоке watch в Vue.js 3. Не забывайте очищать интервал после его остановки, чтобы избежать утечек памяти.