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
      })

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Reference:

• Composition API - Lifecycle hooks

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