基础用法：如何用watch监听input的实时输入？

做前端开发的朋友应该都遇到过这样的场景——用户在输入框里打字时，需要实时校验格式、计算总价，或者根据输入内容动态筛选列表，这时候，如何高效监听输入框的变化就成了关键，在Vue3中，watch是处理这类需求的常用工具，但很多新手甚至有经验的开发者，也会在实际使用中踩坑，今天就来聊聊“Vue3中如何用watch监听input输入框？常见问题怎么解决？”

我们需要明确：在Vue3中，input输入框的绑定通常用v-model，而v-model本质上是value属性和input事件的语法糖，监听input的输入变化，核心是监听v-model绑定的变量。

假设我们有一个简单的输入框,模板代码如下：

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

对应的script部分（使用组合式API）：

import { ref, watch } from 'vue'
export default {
  setup() {
    const inputValue = ref('') // 用ref定义响应式变量
    // 用watch监听inputValue的变化
    watch(inputValue, (newVal, oldVal) => {
      console.log('输入内容变化了：', newVal)
      // 这里可以写校验、计算等逻辑
    })
    return { inputValue }
  }
}

这段代码的逻辑很简单：当用户在输入框中输入内容时，inputValue会被实时更新，watch会捕获到这个变化，执行回调函数，需要注意的是，watch的第一个参数如果是ref变量，会自动解包，所以直接传入inputValue即可，不需要.value。

深度监听：当input绑定的是对象属性时怎么办？

实际开发中，输入框可能不止一个,这时候我们会用对象来统一管理表单数据，

const form = reactive({
  username: '',
  password: ''
})

模板中输入框的绑定变为：

<input type="text" v-model="form.username" />

这时候如果直接用watch监听form，会发现回调不会触发，因为watch默认只监听引用变化，而对象属性的修改属于“深度变化”，这时候需要开启深度监听选项deep: true：

watch(
  () => form.username, // 监听具体属性（推荐写法）
  (newVal) => {
    console.log('用户名变化了：', newVal)
  }
)
// 或者监听整个对象并开启deep（不推荐，性能较差）
watch(form, (newForm, oldForm) => {
  console.log('表单变化了：', newForm.username)
}, { deep: true })

这里更推荐第一种写法——明确监听具体属性路径，因为监听整个对象并开启deep会增加不必要的性能开销，尤其是当对象属性很多时,每次任意属性变化都会触发回调。

立即执行：页面加载时就触发一次监听

有些场景需要初始化时就执行一次监听逻辑，比如输入框有默认值时，需要立即校验格式，这时候可以用immediate: true选项：

watch(inputValue, (newVal) => {
  validateInput(newVal) // 初始化时就校验一次
}, { immediate: true })

这样，页面加载时即使用户还没输入，watch的回调也会立即执行一次,参数是当前的inputValue值。

常见问题：为什么watch会重复触发？如何优化性能？

实际使用中，最常遇到的问题是watch回调频繁触发，比如用户快速输入时，回调会随着每一次键盘按下不断执行，可能导致性能问题（比如频繁调用接口查询），这时候可以用防抖（debounce）来优化。

举个例子，用户输入时需要实时搜索联想词,这时候可以给watch的回调加上防抖：

import { ref, watch } from 'vue'
import { debounce } from 'lodash' // 需要安装lodash
const inputValue = ref('')
const search = debounce((val) => {
  console.log('发起搜索：', val)
  // 调用接口获取联想词
}, 300) // 300ms防抖
watch(inputValue, (newVal) => {
  search(newVal)
})

这样，只有当用户停止输入300ms后，才会触发搜索请求,避免了不必要的接口调用。

另一个常见问题是“监听reactive对象时无效”。

const obj = reactive({ count: 0 })
watch(obj, (newVal) => { ... }) // 不会触发

这是因为reactive对象的监听需要明确指定路径,正确的做法是监听一个返回该属性的函数：

watch(
  () => obj.count, // 指定具体属性路径
  (newCount) => { ... }
)

最佳实践：这样用watch更高效

1. 结合computed处理复杂逻辑：如果监听的逻辑需要依赖多个变量，可以先用computed计算出最终值，再监听computed的结果，比如同时监听用户名和密码是否为空：

   const form = reactive({ username: '', password: '' })
   const isFormEmpty = computed(() => !form.username || !form.password)

watch(isFormEmpty, (isEmpty) => { console.log('表单是否为空：', isEmpty) })

2. **清理副作用**：如果watch回调中启动了定时器、订阅了事件，需要在组件卸载时清理，避免内存泄漏，watch的回调可以返回一个清理函数：
```javascript
watch(inputValue, (newVal, oldVal, onCleanup) => {
  const timer = setInterval(() => {
    console.log('定时任务：', newVal)
  }, 1000)
  onCleanup(() => {
    clearInterval(timer) // 组件卸载或监听停止时清理
  })
})

3. 避免过度使用watch：有些场景用computed更合适，比如输入框显示计算结果时，computed会自动追踪依赖并更新，而watch更适合需要“当变化发生时执行某些操作”的场景（如发送请求、修改其他状态）。

Vue3的watch在监听input输入框时，核心是抓住“监听响应式变量”这一本质，基础用法简单直接，遇到对象属性时注意深度监听的正确打开方式，性能优化靠防抖，复杂场景结合computed和清理函数，掌握这些技巧后，不仅能高效实现输入监听需求，还能避免不必要的性能问题和逻辑错误，下次开发表单功能时，不妨试试这些方法,看看代码是不是更简洁流畅了？