vue中watch的用法
时间: 2023-10-16 20:09:11 浏览: 35
在Vue中,watch是用于监听数据变化并执行相应操作的一个功能。它可以监听单个数据的变化,也可以监听多个数据的变化,并在数据变化时执行相应的回调函数。
使用方法如下:
1. 监听单个数据的变化:
```
watch: {
// 监听data中的msg变量
msg: function(newVal, oldVal) {
console.log('msg变量的值从 ' + oldVal + ' 变为 ' + newVal);
}
}
```
2. 监听多个数据的变化:
```
watch: {
// 监听data中的msg和count变量
msg: function(newVal, oldVal) {
console.log('msg变量的值从 ' + oldVal + ' 变为 ' + newVal);
},
count: function(newVal, oldVal) {
console.log('count变量的值从 ' + oldVal + ' 变为 ' + newVal);
}
}
```
3. 监听对象或数组的变化:
```
watch: {
// 监听data中的person对象的name属性的变化
'person.name': function(newVal, oldVal) {
console.log('person.name的值从 ' + oldVal + ' 变为 ' + newVal);
},
// 监听data中的list数组的变化
'list': function(newVal, oldVal) {
console.log('list数组的值从 ' + oldVal + ' 变为 ' + newVal);
}
}
```
在watch中,我们可以设置一个deep选项来深度监听对象或数组的变化:
```
watch: {
// 监听data中的person对象的所有属性的变化
'person': {
handler: function(newVal, oldVal) {
console.log('person对象的值从 ' + oldVal + ' 变为 ' + newVal);
},
deep: true
}
}
```
除了直接监听数据的变化之外,我们还可以使用immediate选项来在组件创建时立即执行watch的回调函数:
```
watch: {
// 监听data中的msg变量,并在组件创建时立即执行回调函数
msg: {
handler: function(newVal, oldVal) {
console.log('msg变量的值从 ' + oldVal + ' 变为 ' + newVal);
},
immediate: true
}
}
```
最后,我们还可以使用watch的第三个参数options来配置一些选项,例如throttle和debounce等选项来控制回调函数的执行频率。