Vue Composition API中watch监听ref变量变化不触发怎么办？

IT人旭东提问于 2026-02-18 19:49:25 阅读 29

框架

在用Vue3写表单组件时遇到个怪问题，我用ref定义了表单值，然后用watch监听这个变量做验证，但输入框内容变化后监听器完全没反应…

代码大概是这样写的：


import { ref, watch } from 'vue'
const formValue = ref('')
watch(formValue, () => {
  console.log('检测到变化')
})

输入框绑定了v-model没问题，控制台就是没输出。试过换成reactive包裹也没用，难道是版本问题吗？

我来解答赞 7 收藏

反馈

1 条解答

红运 Lv1

你这个问题啊，其实是对Vue3的响应式原理理解有点偏差。ref定义的变量确实可以用watch监听，但问题出在你监听的方式上。

JS里面，ref返回的是一个带有.value属性的对象，而你在模板里用v-model绑定的时候，实际上是在修改.value这个值。所以正确的写法应该是监听.value的变化。

改一下你的代码：

import { ref, watch } from 'vue'

const formValue = ref('')



// 这里要监听formValue.value

watch(() => formValue.value, (newValue, oldValue) => {

  console.log('检测到变化', newValue)

})

还有一种可能是你在组件里用了异步更新，这种情况下建议加上深度监听：

watch(formValue, (newValue, oldValue) => {

  console.log('检测到变化')

}, { deep: true })

不过通常第一种写法就够了。我猜你现在的Vue版本应该没问题，因为3.2之后的版本都支持这种写法。要是还是不行，检查下是不是有其他代码干扰了响应式系统，比如直接操作DOM或者用了非响应式的赋值方式。

说实话这坑我也踩过，当时调试了好久，后来仔细看了文档才发现问题。希望这个解答能帮你解决问题。

2026-02-18 20:00