當(dāng)我們需要監(jiān)聽多個(gè)字段值的變化時(shí)径荔，可以直接創(chuàng)建個(gè)對(duì)象，然后去直接監(jiān)聽這個(gè)對(duì)象脆霎，這樣任何一個(gè)屬性發(fā)生變化時(shí)总处，我們都可以感受到（但是我console之后，發(fā)現(xiàn)oldVal,和newVal值相同）
數(shù)據(jù)定義（代碼中g(shù)etPrice()是對(duì)象發(fā)生變化時(shí)睛蛛，去走的方法鹦马，這里替換成你自己需要的即可）
data () {
return {
priceForm: {
activityId: '',
terminalType: '',
authenType: '',
chargeType: '',
currentTime: '',
memberLevel: ''
},
timer: null
}
}
watch: {
priceForm: {
handler: function (newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal)
this.getPrice()
},
deep: true
}
}
有上述問題的之后我們就來想辦法解決他 =>添加computed計(jì)算屬性即可
watch: {
priceFormData: {
handler: function (newVal, oldVal) {
console.log('newVal', newVal)
console.log('oldVal', oldVal)
this.getPrice()
},
deep: true
}
},
computed: {
priceFormData () {
return JSON.parse(JSON.stringify(this.priceForm))
}
}
這樣之后又發(fā)現(xiàn)了個(gè)問題，因?yàn)槊恳粋€(gè)屬性的改變一個(gè)一個(gè)的忆肾，這樣我初始化頁面的時(shí)候改變一次就會(huì)調(diào)一次接口荸频，但是其實(shí)初始化的時(shí)候我調(diào)用一次接口就可以了=>所以添加了一個(gè)timeout
watch: {
priceFormData: {
handler: function (newVal, oldVal) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getPrice()
}, 1000)
},
deep: true
}
},
computed: {
priceFormData () {
return JSON.parse(JSON.stringify(this.priceForm))
}
}
