```html

vue中watch对象属性

直接说结论：Vue 里用 watch 监听一个对象属性，象属性默认只能监听到整个对象的象属性引用变化，而不是象属性属性值的变化。想让 watch 对某个属性做出反应，象属性你得加 deep 或者用字符串路径——但这两者都有坑，象属性我自己踩过不止一次。象属性

先看一个真实场景。象属性上周写一个表单组件，象属性formData 是象属性个对象，里面有 username、象属性age 两个字段。象属性我在 watch 里写了 formData，象属性想当 username 变化时发请求校验。象属性结果用户输入时，象属性回调死活不触发。象属性为什么？因为 formData.username = 'new' 这种操作不会改变 formData 本身的引用，Vue 默认只比较引用地址，当然没反应。

解决办法一：加 deep: true。像这样——

watch: {  formData: {  handler(newVal) {  console.log('username变了', newVal.username) }, deep: true } }

这样确实能触发，但代价不小。deep 会递归遍历对象所有属性，哪怕你只关心 username，age 甚至嵌套十层的 address.city.street 一有风吹草动，回调都会跑。我那个表单里还有个大数组 hobbies，每次勾选都触发一次校验请求，浏览器直接卡成 PPT。后来改成监听具体路径才消停。

解决办法二：用字符串路径。Vue 2 和 Vue 3 都支持这种写法：

watch: {  'formData.username'(newVal) {  console.log('只监听username', newVal) } }

清爽多了。但注意，路径里的属性名如果是动态的，比如 formData[field]，这种字符串路径就不好使了。你得用计算属性或者 watch 一个函数返回该值。我一般会写：

computed: {  currentField() {  return this.formData[this.activeField] } }, watch: {  currentField(newVal) {  // 处理 } }

这招在 Vue 3 的 watch 组合式 API 里更自然。直接传一个 getter 函数：

watch( () => formData.username, (newVal) => {  /* ... */ } )

Vue 3 的 watch 还支持监听多个源，数组里放多个 getter 就行。不过有个细节：如果你监听的是 reactive 对象的属性，watch(() => obj.prop, ...) 默认就是浅监听，不需要 deep。但如果你直接写 watch(obj, ...)，那就变成深层监听了，而且 newVal 和 oldVal 会是同一个引用——这坑我在迁移项目时遇到过，打印 oldVal 发现跟 newVal 一模一样，调试了半天才想起来是 Vue 3 的响应式代理机制。

还有一点：deep 监听在 Vue 3 里对 reactive 对象是隐式开启的，不需要你手动加。但如果你用 ref 包裹一个对象，watch(refObj, ...) 默认只监听 .value 的引用变化，想深入属性还是得 deep: true。我个人的习惯是，能用 getter 精确监听就绝不用 deep，性能差距在小项目里不明显，但数据一多就是灾难。

最后说个冷门情况：监听数组的某一项。比如 list[0].name，字符串路径写 'list.0.name' 在 Vue 2 里可行，Vue 3 也兼容。但如果你用 watch(() => list[0].name, ...)，当 list 被整体替换时，getter 会重新执行，没问题。可要是 list 长度变了，索引 0 还在，监听依然有效——这点比字符串路径灵活，因为路径是静态的，索引变了就失效。

总结一下我的经验：优先用 getter 函数精确监听，别图省事加 deep。Vue 3 里注意 reactive 和 ref 的差异，oldVal 在深层监听时可能不可靠。字符串路径适合简单场景，复杂逻辑还是计算属性或 getter 更稳。

```