vue中watch监听多个属性
js,ts两种写法
监听多个属性需要配合上计算属性(computed)进行搭配使用,使用计算属性return出需要监听的多个属性,在使用watch进行监听这个方法。
// ts写法需要借助vue-property-decorator APIimport {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}}
如果觉得《vue中watch同时监听多个属性》对你有帮助,请点赞、收藏,并留下你的观点哦!