Polymer 1.X：对象子属性复杂观察者未触发问题求助

看起来你踩了几个Vue响应式系统和配置的常见坑，我帮你拆解一下问题：

1. 首先，data属性声明错误 #

你在data里写的requirement: { type:Object, value: { allLoaded: false, tagsLoaded: false } }是props的写法，不是data的写法！data里应该直接返回属性的初始值，不需要type和value字段。

错误的写法会导致this.requirement实际是一个包含type和value的对象，而不是你预期的{allLoaded: false, tagsLoaded: false}。后续你修改的是this.requirement.value.allLoaded，但你的观察者监听的是requirement.*，也就是type或value本身的变化，自然不会触发。

修正后的data声明：

data() {
  return {
    requirement: { allLoaded: false, tagsLoaded: false }
  }
}

2. 观察者配置字段错误 #

Vue组件选项里没有observers这个属性，你应该用watch选项来配置观察者。这是最直接导致观察者不触发的原因——Vue根本没识别到你的观察者配置！

3. 嵌套对象的正确监听方式 #

要监听对象所有子属性的变化，有两种常用方式：

方式一：使用deep: true监听整个对象 #

这种方式会监听对象内部所有子属性的变化，适合需要关注整个对象任何变动的场景：

// 正确的watch配置
watch: {
  requirement: {
    handler: 'requirementChanged',
    deep: true // 开启深度监听
  }
},
// 观察者方法（放在methods里）
methods: {
  requirementChanged(newVal) {
    console.log('obs : ', this.requirement, newVal);
  }
}

方式二：监听特定子属性的路径 #

如果你只需要关注某个特定子属性的变化，可以直接写路径字符串：

watch: {
  'requirement.allLoaded'(newVal) {
    console.log('allLoaded changed to: ', newVal);
  },
  'requirement.tagsLoaded'(newVal) {
    console.log('tagsLoaded changed to: ', newVal);
  }
}

最后检查修改属性的方式 #

确保你修改属性时是直接操作响应式属性，比如：

// 正确的修改方式
this.requirement.allLoaded = true;

// 或者重新赋值整个对象（同样会触发深度监听）
this.requirement = { ...this.requirement, allLoaded: true };

如果是添加新的子属性（不是初始声明的allLoaded/tagsLoaded），需要用this.$set来确保新属性是响应式的：

this.$set(this.requirement, 'newProp', true);

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