组合 API 监视处理程序

Question

我该如何重构：

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

进入组合 API？

我尝试了类似的方法，但会引发错误：

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

Answer 1

您可以如下重构它。您可以将immediate 选项作为Vue 3 中的第三个参数传递给watch 方法

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>

参考：

• Composition API - Lifecycle hooks

P.S：您可以使用import {watch, ref, onUnmounted} from "vue" 使代码更干净。