如何手动停止Vue中的watch监听器？

嘿，其实Vue的watch API本身就内置了解决方案，只是容易被忽略——调用watch后会返回一个停止函数，你可以在需要终止监听的时机调用它就行，完全满足你“运行多次后停止”的需求。

先解决你示例中「仅运行一次就停止」的场景 #

只需要把watch的返回值存起来，在第一次触发回调时调用这个停止函数：

const state = reactive({ val: 0 })
// 保存watch返回的停止函数
const stopWatch = watch(() => state.val, (newVal) => {
  console.log(newVal)
  // 第一次触发后立即停止监听
  stopWatch()
})

for (let i = 1; i < 1000; i++) {
  setTimeout(function timer() {
    state.val = state.val + 1
  }, i * 1000);
}

扩展到「运行N次后停止」的实际场景 #

如果需要监听器触发指定次数后再停止，只需要加一个计数器来控制停止时机就行：

const state = reactive({ val: 0 })
// 记录触发次数
let triggerCount = 0
// 目标停止次数
const stopAfter = 3

const stopWatch = watch(() => state.val, (newVal) => {
  console.log(newVal)
  triggerCount++
  
  // 达到目标次数时停止监听
  if (triggerCount === stopAfter) {
    stopWatch()
    console.log(`监听器已触发${stopAfter}次，现已停止`)
  }
})

for (let i = 1; i < 1000; i++) {
  setTimeout(function timer() {
    state.val = state.val + 1
  }, i * 1000);
}

补充说明为什么不用watchEffect #

你说的没错，watchEffect确实不适合这个场景：它是初始化时立即执行，然后自动追踪依赖变化触发回调，虽然它也返回停止函数，但它的触发逻辑是基于依赖变更，没办法像watch这样精准监听指定数据源的变化次数，所以用watch的停止函数才是更贴合你需求的方案。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov