vue中使用computed计算数据不生效

Question

在计算属性中依赖于props的data数据，当data更新后，computed并没有实时去拿data数据。(本来想通过watch data的改变去实现，但是watch一直不执行，但data数据本身确实改变了，很诡异...)
代码如下：

    props: {
        data: {
            default: () => {},
            type: Object,
        },
    },
    data() {
        return {
        };
    },
    created() {
    },
    computed: {
        ...mapState({
        }),
        handleTotalPrice() {
            return this.fixNumber(this.totalPrice);
        },
        handledData() {
            const handledData = JSON.parse(JSON.stringify(this.data)); // 这里
            Object.entries(handledData).forEach(([key, value]) => {
                if (value.price) {
                    handledData[key].price = this.fixNumber(value.price);
                }
                if (value.list) {
                    ...
                }
            });
            return handledData;
        },
    },

watch: {
    // 以下两种写法都无效
    data(newV, oldV) {
        console.log('submit watch');
    },
    data: {
        handler(newV, oldV) {
            console.log('submit watch');
        },
        deep: true,
        
    },
},

---

已经定位到问题了。在父组件设置obj的值需要通过set或者splice等方法，要不然，子组件监听不到。
之前以为只是本组件内需要通过set，万万没想到。。。

Answer 1

两种，都测试了一遍，都是触发的

<template>
    <div>
        <div>{{total}}</div>
        <div>{{totalTest}}</div>
    </div>
</template>
<script>
export default {
  props: {
    data: String
  },
  components: {},
  data () {
    return {
    }
  },
  computed: {
    total () {
      return this.data + '哈哈哈哈哈'
    },
    totalTest () {
      const handledData = JSON.parse(JSON.stringify(this.data)) // 这里
      return handledData + '嘿嘿嘿'
    }
  },
  watch: {
    data (newV, oldV) {
      console.log(11111)
    }
  },
  created () {
  },
  methods: {}
}
</script>

对象的，也触发了

<template>
  <div>
    <div>{{total.number}}</div>
    <div></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  components: {},
  data () {
    return {

    }
  },
  computed: {
    total () {
      const handledData = JSON.parse(JSON.stringify(this.data)) // 这里
      handledData.number = handledData.number + 'hhhhh'
      return handledData
    }
  },
  created () {
  },
  methods: {}
}
</script>

Answer 2

使用监听有个要注意的点，组件刚挂载进来的时候传入props，在我印象中是不会进行触发的。