如何将Options API的watch配置重构为Vue3 Composition API写法？

• 参数结构不符合Vue3 watch 函数的规范：Vue3 中 watch 函数的传参规则为 watch(监听源, 回调handler, 配置项)，你将handler和配置项都写在了第一个参数的函数体内，导致语法报错
• 监听源的箭头函数写法错误：如果用箭头函数作为监听源（getter写法），需要正确返回要监听的响应式值，你写的箭头函数体内写了count.value,没有return也没有正确返回值，返回值为undefined，无法触发监听

首先确保你用到的count、now、intervalId都是通过ref声明的响应式变量：

import { ref, watch } from 'vue'

// 提前声明所需响应式变量
const count = ref(0)
const now = ref(0)
const intervalId = ref(null)

两种合法的watch写法均可实现需求：

写法1：直接传ref作为监听源（更简洁，推荐监听单个ref变量时使用） #

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

写法2：getter函数作为监听源（适合监听对象属性、多变量联合监听等场景） #

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

为了避免组件卸载后定时器仍在运行导致内存泄漏，建议添加组件卸载时的清理逻辑：

import { onUnmounted } from 'vue'

onUnmounted(() => {
  intervalId.value && clearInterval(intervalId.value)
})

内容的提问来源于stack exchange，提问作者Taaa