Vue组件间共享对象异常：第二次输入无通知问题排查

嘿，我明白你遇到的问题了——第一次输入回车一切正常，但第二次就没反应了对吧？核心原因是Vue的watch默认是「浅监听」，它只会检测被监听对象的引用是否发生变化，而不会盯着对象内部的属性改动。

咱们来拆解一下过程：

1. 第一次输入时，UsrMsg里的messages从初始的{first: null, second: null}被赋值，然后你把这个对象emit给App。App里的childData从空对象{}变成了这个新对象，引用发生了改变，所以Results的watch成功触发。
2. 第二次输入时，你只是修改了messages.first的值，但messages这个对象的引用压根没变——你还是在复用同一个对象实例。当你emit给App时，childData拿到的还是原来的那个对象引用，Results的watch自然检测不到变化，也就不会执行回调了。

下面给你几种可行的解决方案，你可以根据自己的场景选：

方案1：给watch开启深度监听 #

如果需要监听对象内部所有属性的变化，直接给watch加上deep: true配置就能解决问题：

<script>
export default {
  name: "Results",
  props: {
    messages: {
      type: Object
    }
  },
  data: () => ({
    messageList: []
  }),
  watch: {
    messages: {
      handler(newVal) {
        console.log("3) Results", newVal);
        this.messageList.push(newVal.first);
      },
      deep: true // 开启深度监听，检测对象内部属性变化
    }
  }
};
</script>

方案2：emit时传递新对象实例 #

每次提交时，创建一个新的对象传递给父组件，这样每次的引用都是新的，watch就能正常触发：

<script>
export default {
  name: "UsrMsg",
  data: () => ({
    messages: { first: null, second: null }
  }),
  methods: {
    submit() {
      console.log("1) UsrMsg", this.messages);
      // 用扩展运算符创建新对象，改变引用
      this.$emit("inputData", { ...this.messages });
      // 或者用Object.assign：Object.assign({}, this.messages)
    }
  }
};
</script>

方案3：精准监听对象的单个属性 #

如果你只关心messages.first的变化，直接监听这个具体属性会更高效，避免深度监听带来的性能开销：

<script>
export default {
  name: "Results",
  props: {
    messages: {
      type: Object
    }
  },
  data: () => ({
    messageList: []
  }),
  watch: {
    'messages.first'(newVal) {
      console.log("3) Results", newVal);
      this.messageList.push(newVal);
    }
  }
};
</script>

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