Question

我有一个父组件，该组件将对象传递给孩子，并且那个孩子具有依赖于对象prop的计算属性。

我可以看到，当我在父对象中更新prop对象时，prop在子对象中进行了更新，但是计算出的属性仅在加载时计算一次，然后再也不会重新计算，即使我使用'深度”，则永远不会触发计算属性或受监视对象。

这是一个代码示例（假设orderData只是某个对象）

orderData {'test': 5}

父母

OrderForm(
  :orderData='orderData'
)

孩子

  computed: {
    orderJson() {
      console.log('computed')
      return JSON.stringify(this.orderData)
    }
  },
  props: ['orderData']

我也尝试过

  watch: {
    orderData: {
      handler(val, oldval) {
        console.log('hanlded')
        this.orderJson = JSON.stringify(val)
      },
      deep: true
    }
  }

在这两种情况下，我的Vue检查器都看不到orderJson的更新，为什么有任何想法？

Answer 1

尝试在this.orderJson观察者中注销orderData：

  watch: {
    orderData: {
      handler(val, oldval) {
        console.log(this.orderJson);
      },
      deep: true
    }
  }

计算的道具只有在某个地方使用后才会更新

编辑：这是一个简化的示例，我认为满足您的要求，尽管我不是100％清楚：https://codepen.io/codingcampbell/pen/219e1377e764659c16ebb8cefbca9ce9

动态道具对象的计算属性

1 个答案: