Vue侦听器适用于表单实时验证、防抖提交与跨字段联动；支持监听单值、多值、嵌套属性及深度监听，并可配合immediate实现初始化校验。
Vue 侦听器在表单验证中非常实用，尤其适合做实时反馈、防抖提交、状态联动等场景。它不替代计算属性或 v-model，而是专注“数据一变就响应”，特别适合异步校验（如查重）、复杂规则判断（如密码强度+确认匹配）、或跨字段依赖（如邮箱格式影响验证码按钮状态）。
监听单个输入并实时验证
比如用户名是否被占用，可配合防抖避免频繁请求：
- 用 ref 定义输入值和提示信息
- 用 watch 监听输入变化，内部用 setTimeout 实现防抖
- 输入为空时清空提示；长度不足时提示格式错误；否则发起模拟校验
代码示意：
const username = ref('')
const tip = ref('')
watch(username, (newVal) => {
if (!newVal.trim()) {
tip.value = ''
return
}
if (newVal.length < 2) {
tip.value = '用户名至少2位'
return
}
clearTimeout(timer)
timer = setTimeout(() => {
// 模拟接口：若为 admin 则已存在
tip.value = newVal === 'admin' ? '该用户名已被注册' : '可用'
}, 500)
})
监听多个字段做联动校验
常见于注册表单中的“密码”与“确认密码”比对：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 把两个 ref 放入 watch 第一个参数的数组中
- 回调接收新旧值数组，分别解构处理
- 仅当两者都非空时才校验是否一致，避免初始空值误报
示例逻辑：
const password = ref('')
const confirmPassword = ref('')
const pwdMatch = ref(true)
watch([password, confirmPassword], ([newPw, newCf], [oldPw, oldCf]) => {
if (!newPw || !newCf) {
pwdMatch.value = true
return
}
pwdMatch.value = newPw === newCf
})
深度监听对象字段（如表单整体）
当表单数据用 reactive 包裹为对象时，需监听特定嵌套属性：
- 不能直接写 watch(form.user.email, ...) —— 这会报错
- 应传入 getter 函数：() => form.user.email
- 若需监听整个对象任意属性变化（如用于“是否已修改”标记），可加 deep: true
例如标记表单是否脏（dirty）：
const form = reactive({
user: { name: '', email: '' },
profile: { bio: '' }
})
const isDirty = ref(false)
watch(
() => ({ ...form }), // 浅拷贝触发响应
() => { isDirty.value = true },
{ deep: true }
)
结合 immediate 实现初始化校验
有些字段需要加载后立刻校验（如默认填充的手机号）：
- 添加 { immediate: true } 选项，watch 回调会在声明时立即执行一次
- 适合校验初始值合法性，或预加载关联选项（如选中省后立即拉取市列表）
用法示例：
const phone = ref('13800138000')
watch(phone, (val) => {
if (val && !/^1[3-9]\d{9}$/.test(val)) {
console.warn('手机号格式不正确')
}
}, { immediate: true })
