javascript - 如何使带有展开 (...) 符号的对象具有反应性？

Question

我正在尝试更改对象的不透明度属性并使该更改具有反应性:

Component.vue:

<child-component :common="itemCommon"></child-component>

<script>
data () {
  return {
    rest: {}
  }
},

computed: {
  itemCommon () {
    return {
      item: {
        opacity: 1,
        ...this.rest
      }
    }
  }
},

beforeMount () {
  this.rest = { name: 'a' }
}
<script>

childComponent.vue:

<script>
props: {
  common: {
    type: Object,
    default () {
      return {}
    }
  }
},

beforeMount () {
  this.common.item.opacity = 0
}
</script>

opacity 属性不会设置为 0。 Vue 不考虑 itemCommon

如何修改代码以使 itemCommon 变得响应式？

Answer 1

通常，vue 会监视组件的 data 属性的变化，并在看到 data 变化时更改 View 。因此，为了使某些数据具有反应性，我们必须在组件的数据中声明它。这里的两个组件都没有 opacity，因此 vue 可能不会拾取它。将其添加到父级的 data 应该可以修复它，但是您会收到类似 directly set prop in child 的警告，那么您应该移动 this.common.item .opacity = 0 给父级。您可以找到很多搜索警告的内容，但这里简单介绍一下: prop 通常会在父级中更改，在子级中也更改它会令人困惑，并且根据设计，子级提供功能/界面，父级，谁使用子进程，在运行时向子进程提供数据，信任子进程使用我们期望的功能处理数据，因此我们实现了松散耦合。 (这通常也称为单向数据流)