Vue中为动态创建的对象添加监听器的问题

嘿，我来帮你拆解这段Vue代码里的watch逻辑，以及怎么搞定动态对象的变化追踪问题~

先理清楚你代码里的watch表现 #

咱们一步步看执行过程：

1. 一开始value是空字符串，你写的第一个全局watch会在value从''变成'111'、再变成空对象{}的时候触发——因为这两次都是值/引用的完全替换，普通watch能捕捉到这种顶层变化。
2. 当value变成对象后，你用forEach给它加name和age字段，这时候Vue2其实没法检测到这些新增属性的变化（因为Vue2的响应式是靠Object.defineProperty在初始化时绑定的，事后加的属性默认不是响应式的）。
3. 你后来用$watch加了一个带deep: true的监听，然后在$nextTick里修改value.name和value.age——这时候这个deep watch会触发，因为它会递归监听对象内部的子属性；但第一个全局的普通watch不会触发，因为它只盯着value本身的引用有没有变，而对象的引用没改，只是内部字段变了。

怎么优化才能正确追踪所有变化？ #

如果想完整覆盖「从原始值转对象→动态加字段→字段值变化」的全流程，有几个关键点要注意：

• 提前初始化对象结构：如果你一开始就知道value会变成带name和age的对象，直接在data里初始化好，Vue会自动把这些字段变成响应式的：

data() {
  return {
    value: {
      name: '',
      age: ''
    },
  };
}

• 动态加字段用$set：如果必须事后加字段，得用Vue提供的this.$set（或者全局的Vue.set）来添加，这样才能让新增字段加入响应式系统：

fields.forEach(field => {
  this.$set(this.value, field, '');
});

• 选对watch类型：
  • 普通watch（不带deep）：只监听value本身的引用/值变化（比如从字符串变对象，或者对象被换成另一个新对象）。
  • 带deep: true的watch：会监听对象内部所有子属性的变化，但要注意，deep watch有一定性能开销，别滥用。

修改后的完整代码示例 #

调整后的代码就能正确触发所有该触发的watch了：

const fields = ['name', 'age']; 
const app = new Vue({ 
  el: '#app', 
  data() { 
    return { 
      value: '', 
    }; 
  }, 
  watch: { 
    value: function() { 
      console.log('Global: Value changed'); 
    }, 
  }, 
  mounted() { 
    this.value = '111'; // 触发Global watch
    this.value = {}; // 触发Global watch
    // 用$set添加响应式字段
    fields.forEach(field => {
      this.$set(this.value, field, '');
    });
    // 添加deep watch监听对象内部变化
    this.$watch('value', callback, { deep: true }); 
    function callback() { 
      console.log('Callback: Value changed'); 
    } 
    this.$nextTick(() => { 
      this.value.name = 'Max'; // 触发Callback watch
      this.value.age = 30; // 触发Callback watch
      console.log(this.value) 
    }); 
  }, 
 }); 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> 
<div id="app"></div>

最后补个关键知识点 #

Vue2的响应式系统对原始值和对象的处理逻辑不一样：原始值的变化直接被监听，而对象的响应式是在初始化时绑定好的，新增属性必须用$set才能触发响应式；另外，watch的deep选项只对对象生效，用来递归监听子属性的变化。

内容的提问来源于stack exchange，提问作者Dmytro