vue中watch监听多个属性

js,ts两种写法

监听多个属性需要配合上计算属性(computed)进行搭配使用，使用计算属性return出需要监听的多个属性，在使用watch进行监听这个方法。

// ts写法需要借助vue-property-decorator API
import { Vue, Watch } from 'vue-property-decorator';
// ts写法
// 这里是计算属性,this.memberData为数据源
  get sensitiveData () {
    const { purchaseType, saleType, status, buyerId } = this.memberData;
    return { purchaseType, saleType, status, buyerId };
  }

// ts写法
// 监听属性
 @Watch('sensitiveData', { deep: true })
  updateSensitiveData () {
    this.isEditSensitiveData = true;
  }


// js写法
// 这里是计算属性,this.memberData为数据源
computed: {
      sensitiveData () {
       const { purchaseType, saleType, status, buyerId } = this.memberData;
       return { purchaseType, saleType, status, buyerId };
      }
    },
    
// js写法
// 监听属性
watch: {
	sensitiveData: {
	 handler(newVal, oldVal) {
	 	  this.isEditSensitiveData = true;
	  }，
	    deep: true
	 }
}