vue 中的watch
时间: 2023-11-09 16:02:09 浏览: 41
在 Vue 中,watch 是一个用于监听数据变化并执行相应操作的选项。它可以监听一个特定的数据属性,当该属性发生变化时,执行相应的回调函数。
watch 选项有两种写法:一种是直接在组件实例中定义,另一种是在组件实例的 watch 选项中定义。下面是一个示例:
```
// 直接在组件实例中定义
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
watch: {
message(newValue, oldValue) {
console.log(`message changed from ${oldValue} to ${newValue}`)
}
}
}
// 在组件实例的 watch 选项中定义
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
watch: {
message: {
handler(newValue, oldValue) {
console.log(`message changed from ${oldValue} to ${newValue}`)
},
immediate: true // 立即执行一次回调函数
}
}
}
```
在上面的示例中,我们监听了组件实例中的 message 属性,并在其发生变化时执行了相应的回调函数。在第二个示例中,我们还设置了 immediate 选项,使得回调函数在组件实例创建时就会被立即执行一次。