Watch (listener)
Watch is used to respond to data changes. This method is most useful when asynchronous or expensive operations need to be performed when data changes.
1. How to use
Function usage
watch: {
count(newValue, oldValue) {
console.log('count-newValue:' + newValue)
console.log('count-oldValue:' + oldValue)
// todo 需要依据count执行的异步操作或复杂操作
},
}
object usage
watch: {
amount: {
handler(newValue, oldValue) {
console.log('amount-newValue:' + newValue?.value, newValue)
console.log('amount-oldValue:' + oldValue?.value, oldValue)
// todo 需要依据count执行的异步操作或复杂操作
},
immediate: true, // 默认是false，watch在首次绑定amount时，是否立即执行handler函数
deep: true // 默认是false，在监听对象变化时，一般情况下无法监听对象内部属性的变化。deep属性为true时，可以对对象深度监听
}
// 也可以直接监听
'amount.value': {
handler(newValue, oldValue) {
console.log('amount-newValue:' + newValue?.value, newValue)
console.log('amount-oldValue:' + oldValue?.value, oldValue)
// todo 需要依据count执行的异步操作或复杂操作
},
immediate: true,
deep: false
}
}
String or array usage
watch: {
// ['valueChange', 'valueChange2']
value: 'valueChange'
},
methods: {
valueChange(newValue, oldValue) {
console.log('value-newValue:' + newValue)
console.log('value-oldValue:' + oldValue)
},
valueChange2() {
console.log('valueChange2-------')
}
}
2. Usage scenarios
What kind of data can be monitored by watch.
data
The data in the data attribute in vue can be monitored
data() {
return {
count: 0
}
},
watch: {
count(newValue, oldValue) {
console.log('count-newValue:' + newValue)
console.log('count-oldValue:' + oldValue)
// todo 需要依据count执行的异步操作或复杂操作
},
}
props
The data in the props attribute in vue can be monitored, the change of the value passed by the parent component can be monitored, and the logic of this component can be processed.
watch: {
// props属性
count(newValue, oldValue) {
console.log('子组件newVlaue:' + newValue)
console.log('子组件oldValue:' + oldValue)
},
},
props: {
count: {
type: Number,
default: 0
}
},
inject
Data that is dependency injected into this component can be listened to.
watch: {
// 依赖
map: {
handler(newValue, oldValue) {
console.log('依赖newVlaue:' + newValue)
console.log('依赖oldValue:' + oldValue)
},
immediate: true
}
},
inject: ['map']
computed
Changes in computed property values can be monitored.
watch: {
// computed属性
countMultiply(newValue, oldValue) {
console.log('计算属性newVlaue:' + newValue)
console.log('计算属性oldValue:' + oldValue)
}
},
computed: {
countMultiply() {
return this.count + 100
}
},