Vue之Watcher的用法是什么-开发者知识库平台

Vue之Watcher的用法是什么

vue

1552

2023/8/21 17:32:41

栏目: 编程语言

Vue中的Watcher是一个观察者对象，用于监听数据的变化并执行相应的回调函数。Watcher的用法如下：

在Vue实例中创建一个Watcher对象：

const vm = new Vue({
data() {
return {
message: 'Hello World'
}
},
watch: {
message(newVal, oldVal) {
console.log('message的值发生了变化：', newVal, oldVal)
}
}
})

在watch选项中定义要监听的数据和相应的回调函数：

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

Watcher还可以用来监听计算属性和深度监听对象中的变化：

watch: {
// 监听计算属性
fullName(newVal, oldVal) {
console.log('fullName的值发生了变化：', newVal, oldVal)
},
// 深度监听对象
obj: {
handler(newVal, oldVal) {
console.log('obj的值发生了变化：', newVal, oldVal)
},
deep: true
}
}

总结一下，Watcher的用法就是在Vue实例的watch选项中定义要监听的数据和回调函数，在回调函数中处理数据变化的逻辑。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

Vue之Watcher的用法是什么

最新知识库

相关标签