Composition API watch handler

user_2533641 0
Viewed 426

How do I refactor this:

watch: {
    count: {
      handler (v) {
        if (v) this.intervalId = setInterval(() => { this.now++ }, 1000)
        else clearInterval(this.intervalId)
      },
      immediate: true
    }
  }

Into Composition API?



I tried something like that, which throws errors:

watch(()=> {
      count.value,
      handler (value) {
      if (value)
        intervalId.value = setInterval(() => {
          now.value++;
        }, 1000);
      else clearInterval(intervalId.value);
      },
      immediate: true
      })
vuejs3 vue.js
1 Answers

You can refactor it as below. You can pass immediate option to the watch method as the 3rd parameter in Vue 3

const app = Vue.createApp({
  setup() {
    const count = Vue.ref(0);
    const now = Vue.ref(0);
    const intervalId = Vue.ref(0);

    Vue.watch(count, (currentValue, oldValue) => {
      if (currentValue) intervalId.value = setInterval(() => now.value++, 1000);
    }, {
      immediate: true
    });
    
    Vue.onUnmounted(() => { clearInterval(intervalId.value) });

    return {
      count,
      now
    };
  }
}).mount('#app');
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  {{ count }} - {{ now }}
  <button @click="count++">Increment</button>
  <button @click="count=0">reset</button>
</div>

Reference:

P.S: You can use import {watch, ref, onUnmounted} from "vue" to make the code cleaner.

user_160465210
Related