组成 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" 让代码更简洁。

组成 API 手表处理程序

Composition API watch handler

vue.js

vuejs3

参考：