Vue 3中能否通过watch()监听input元素ref的value属性变化？

你当前的写法存在两个核心问题：

1. 你监听的是DOM元素的引用：refA的value是原生input DOM对象，只有当元素挂载（引用从null变为DOM对象）时才会触发watch；后续输入时，DOM对象的value属性变化并不会改变refA的引用指向（始终是同一个DOM元素），Vue的watch无法追踪原生DOM对象的属性变化，即使开启deep: true也无效。
2. 违背了Vue数据驱动的设计理念：直接操作/监听DOM元素不是Vue推荐的做法，应该通过响应式数据来同步视图状态。

推荐方案：用v-model绑定响应式数据并监听 #

这是Vue官方推荐的方式，通过v-model自动同步输入框值与响应式变量，监听变量即可捕捉输入变化：

<script setup>
import { ref, watch } from 'vue'

// 定义响应式变量绑定输入框
const inputValue = ref('test')

// 监听响应式变量的变化
watch(inputValue, (newValue, oldValue) => {
  console.log('输入值更新：', newValue)
  console.log('旧值：', oldValue)
})
</script>

<template>
  <input v-model="inputValue" type="text" /> <br />
</template>

特殊场景方案：监听DOM元素的输入事件（不推荐） #

如果因为特殊需求必须直接操作DOM，可以通过监听input的input事件来捕捉值变化，配合watchEffect处理监听的挂载与清理：

<script setup>
import { ref, watchEffect } from 'vue'

const refA = ref(null)

watchEffect(() => {
  const inputEl = refA.value
  if (!inputEl) return

  // 定义输入事件回调
  const handleInput = () => {
    console.log('输入值变化：', inputEl.value)
  }

  // 添加事件监听
  inputEl.addEventListener('input', handleInput)

  // 清理函数：组件卸载时移除监听，避免内存泄漏
  return () => inputEl.removeEventListener('input', handleInput)
})
</script>

<template>
  <input ref="refA" type="text" value="test" /> <br />
</template>

总结 #

Vue的watch是专为响应式数据设计的，无法追踪原生DOM对象的属性变化。优先使用v-model绑定响应式变量的方案，既符合Vue的设计模式，也能避免直接操作DOM带来的潜在问题。

内容的提问来源于stack exchange，提问作者eric.mcgregor