父组件

<child :obj="aObject"></child>
data () {
  return {
    aObject: {
      key1: { },
      key2: { },
      key3: { }
    }
  }
}

child 是子组件，其中 aObject 的每一个属性值都是相同的结构

子组件：

<div v-for="(value, key, index) in obj">
{{ index }}. {{ key }}: {{ value.p }}
</div>
props: {
  obj: {
    type: Object,
    required: true
  }
}

当我在父组件更新 aObject 的时候视图没有更新，key 是动态计算的，p 的值是从服务端获取的

this.aObject[key].p = '...'
this.$set(this.aObject[key], 'p', '...')

这两种方法数据都是更新了，但是视图不更新

我现在把 aObject 改了一下，把他的类型改成数组

data () {
  aObject: [
    { id: key1 },
    { id: key2 },
    { id: key3 }
  ]
}

现在使用 this.$set(this.aObject[index], 'p', '...') 是可以更新视图的