vue2使用watch
时间: 2023-08-20 16:11:36 浏览: 38
Vue.js 2中的`watch`选项允许你监听Vue实例中的数据变化,并在数据发生变化时执行相应的操作。下面是使用`watch`的一些基本用法示例:
1. 监听单个属性的变化:
```javascript
watch: {
// 监听data中的属性
someData: function(newValue, oldValue) {
// 执行相应的操作
}
}
```
2. 监听多个属性的变化:
```javascript
watch: {
// 监听多个属性
'someData1': function(newValue, oldValue) {
// 执行相应的操作
},
'someData2': function(newValue, oldValue) {
// 执行相应的操作
}
}
```
3. 深度监听对象或数组的变化:
```javascript
watch: {
// 深度监听对象或数组
'someData': {
handler: function(newValue, oldValue) {
// 执行相应的操作
},
deep: true
}
}
```
4. 使用立即调用处理函数:
```javascript
watch: {
// 立即调用处理函数
'someData': {
handler: function(newValue, oldValue) {
// 执行相应的操作
},
immediate: true
}
}
```
这些只是`watch`选项的一些基本用法示例,你可以根据具体的需求进行更复杂的配置。在`handler`函数中,你可以访问到新值和旧值,并执行相应的操作逻辑。