Vue中的Watcher是一个观察者对象,用于监听数据的变化并执行相应的回调函数。Watcher的用法如下:
const vm = new Vue({
data() {
return {
message: 'Hello World'
}
},
watch: {
message(newVal, oldVal) {
console.log('message的值发生了变化:', newVal, oldVal)
}
}
})
watch: {
message(newVal, oldVal) {
console.log('message的值发生了变化:', newVal, oldVal)
}
}
message(newVal, oldVal) {
console.log('message的值发生了变化:', newVal, oldVal)
}
newVal
和oldVal
获取:message(newVal, oldVal) {
console.log('message的值发生了变化:', newVal, oldVal)
}
watch: {
// 监听计算属性
fullName(newVal, oldVal) {
console.log('fullName的值发生了变化:', newVal, oldVal)
},
// 深度监听对象
obj: {
handler(newVal, oldVal) {
console.log('obj的值发生了变化:', newVal, oldVal)
},
deep: true
}
}
总结一下,Watcher的用法就是在Vue实例的watch选项中定义要监听的数据和回调函数,在回调函数中处理数据变化的逻辑。