vue watch 怎么用
时间: 2023-05-17 13:05:40 浏览: 39
Vue 的 watch 选项可以用来监听一个数据的变化,当数据变化时,可以执行一些操作。watch 选项可以接收一个对象,对象的属性是要监听的数据,值是一个回调函数,当数据变化时,回调函数会被调用。例如:
```
watch: {
// 监听 msg 数据的变化
msg: function (newVal, oldVal) {
console.log('msg 变化了:', newVal, oldVal)
}
}
```
在上面的例子中,当 msg 数据变化时,会执行回调函数,打印出新值和旧值。
如果要监听多个数据,可以在 watch 对象中添加多个属性。例如:
```
watch: {
// 监听 msg 数据的变化
msg: function (newVal, oldVal) {
console.log('msg 变化了:', newVal, oldVal)
},
// 监听 count 数据的变化
count: function (newVal, oldVal) {
console.log('count 变化了:', newVal, oldVal)
}
}
```
在上面的例子中,当 msg 或 count 数据变化时,对应的回调函数会被调用。
除了对象形式的 watch 选项,Vue 还提供了一个 $watch 方法,可以在组件实例中动态添加监听器。例如:
```
mounted: function () {
// 动态添加监听器
this.$watch('msg', function (newVal, oldVal) {
console.log('msg 变化了:', newVal, oldVal)
})
}
```
在上面的例子中,mounted 钩子函数会在组件挂载后调用,这时可以动态添加监听器。$watch 方法接收两个参数,第一个参数是要监听的数据,第二个参数是回调函数。