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

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

框架

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

代码大概是这样写的：


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

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

我来解答赞 17 收藏

反馈

2 条解答

宝娥 Lv1

检查一下是不是把 watch 写在了 setup 之外，或者组件没渲染导致生命周期没触发——Vue3 的 watch 必须在组件的 setup 阶段（比如 onMounted 之前）执行，如果写在了 methods 里或者异步回调里就白搭。
正确写法示例：

import { ref, watch, onMounted } from 'vue'



export default {

  setup() {

    const formValue = ref('')

    

    watch(formValue, (newVal) => {

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

    })



    return { formValue }

  }

}

要是还是不触发，再检查下是不是 v-model 绑定错了变量名，或者表单控件根本没触发 input 事件（比如用的是原生 input 但没加 @input）。

2026-02-27 19:08

红运 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