Vue.js 中如何监听通过 .sync 修饰符传递的对象变化？

因为不知道你在子组件内部是否是正确的通过 $emit('update:show', { ... }) 提交的修改。如果是正确提交的 emit 触发的修改应该是可以正确出发 watch 的。

所以只能建议你在父级添加一下 deep 应该就可以触发监听了：

// 父级组件
export default {
  data(){
    return {
      easyShow: {
        ...
      }
    }
  },
  watch: {
    easyShow: {
      handler(val) {
        console.log(val, this.easyShow);
      },
      deep: true
    }
  }
}

以下是一个简单的通过 bind.sync 更新父组件绑定值的一个小Demo：

<template>
  <div id="app">
    <test-component :show.sync="show"/>
  </div>
</template>

<script>
import TestComponent from './components/TestComponent.vue'
export default {
  name: 'App',
  components: { TestComponent },
  data() {
    return {
      show: {
        a: true,
        b: false,
        c: true
      }
    }
  },
  watch: {
    show: {
      handler(val) {
        console.log('app.vue show changed', val, this.show);
      },
      // deep: true
    }
  }
}
</script>

<template>
  <div>
    <button @click="handleClick">点击变更Show值</button>
    <div>{{ show }}</div>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  props: {
    show: Object
  },
  watch: {
    show(){
      console.log('components.vue show changed', this.show);
    }
  },
  methods:{
    handleClick(){
      this.$emit('update:show', { a: !this.show.a, b: !this.show.b, c: !this.show.c})
    }
  }
}
</script>