动态道具对象的计算属性

Question

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

我可以看到，当我更新父级中的 prop 对象时，该 prop 在子级中更新，但计算属性仅在加载时计算一次，然后从不重新计算，即使我使用 '，观察者也是如此deep'，计算属性或监视对象永远不会被触发。

这是一个代码示例（假设 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

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

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

计算的道具在被使用之前不会更新

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