vue中watch同时监听多个属性

别改我bug

已于 2022-09-21 23:01:01 修改

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web端文章标签： vue.js javascript 前端

于 2022-08-30 20:30:24 首次发布

本文链接：https://blog.csdn.net/JunVei/article/details/126611835

web端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在Vue中使用计算属性配合watch来监听多个属性的变化。通过示例展示了JavaScript和TypeScript的不同实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
	 }
}