如何处理响应式/非响应式值的监听，避免watch()警告？

方案1：仅监听响应式的items #

先判断传入的items是否为响应式对象，只有响应式时才创建监听器，从根源避免警告：

import { watch, isRef, isReactive } from 'vue'

// 组件setup内逻辑
if (isRef(items) || isReactive(items)) {
  watch(items, (newItems) => {
    // 处理items变化的逻辑
  })
}

非响应式的静态items不会触发响应式更新，本来就不需要监听，这种方式既合规又高效。

方案2：用watchEffect替代watch #

如果你的需求是只要items引用发生变化就执行逻辑（不管是否响应式），watchEffect是更合适的选择——它自动追踪依赖，不会对非响应式值抛出警告：

import { watchEffect } from 'vue'

watchEffect(() => {
  // 直接使用items，当items引用替换时触发回调
  processItems(items)
})

注意：非响应式items的内部修改（比如数组push）不会触发watchEffect，只有替换整个引用才会生效。

方案3：过滤特定警告（不推荐） #

如果一定要保留watch且忽略警告，可以全局过滤该提示，但这会掩盖其他潜在问题，仅建议万不得已时使用：

// main.js中配置
const app = createApp(App)
app.config.warnHandler = (msg, instance, trace) => {
  // 跳过非响应式watch的警告
  if (!msg.includes('watch() expects a reactive effect')) {
    console.warn(msg, instance, trace)
  }
}

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