watch必须监听响应式的值

在Vue3中，当我尝试监听一个数据：

const b=false
watch(b,()=>{
}) 
//ts报错：没有与此调用匹配的重载。最后一个重载给出了以下错误。

原因 

这是因为watch 函数必须监听一个响应式的值，这是因为 watch 函数的实现依赖于 Vue.js 的响应式机制。在 Vue.js 中，当一个响应式对象的属性发生变化时，它会自动触发更新。因此，我们可以使用 watch 函数来监听这些变化，并在回调函数中执行相应的操作。

如果你尝试使用 watch 函数来监听一个非响应式的值，那么它将无法正常工作，并且会报错或产生意外行为。因此，确保你要监听的值是经过 Vue.js 包装成响应式对象的，这样才能够正确地使用 watch 函数来进行监视。如下所示：

解决方案1

const state = reactive({
  b: false
})

watch(() => state.b, () => {
  // your callback function here
})

在上面的代码中，我们使用 reactive 函数将 b 包装成了一个响应式对象，并将其存储在 state 中。然后，我们使用watch 函数来监视 state.b 的变化，并在回调函数中执行相应的操作。

 解决方案2

const b=false
watch(()=>b,()=>{
}) 

在这种情况下，Vue.js 会自动将该函数返回的值进行包装，并将其作为响应式对象来监视。因此，即使原始的值 b 不是响应式的，但由于你使用了一个函数进行监视，它最终被转换成了一个响应式对象，并可以正常工作。