2020-06-15 vue使用watch监听props传过来的对象中的值

<template>
    <div class="container">
      <div class="top">
        {{itemData.goodsCode}}
      </div>
    </div>
</template>


props: {
        itemData: {
          type: Object,
          default() {
            return {};
          }
        },
      },

如上图所示，itemData为父组件通过props传递过来的对象，其中包含goodsCode，taskBatch，lowestDiscount 等字段。
如果要watch 整个itemData对象，比较简单如下代码

watch:{
        itemData:{
          handler:function (val, oldVal) {
          },
          deep:true
        },
      },

但是如果要监听itemData中的某个值，或者其中的几个值，这时候就要配合computed来使用

computed: {
        twoNum() {
          return {
            taskBatch:this.itemData.taskBatch,
            lowestDiscount:this.itemData.lowestDiscount
          }
        }
      },

watch:{
        twoNum:{
          handler:function (val, oldVal) {
          },
          deep:true
        },
      },