vue watch监测数据发生变化
时间: 2023-10-03 08:07:29 浏览: 79
在Vue中,我们可以使用watch选项来监测数据的变化。监测的对象可以是data中已存在的值、函数、methods中的函数名,以及computed中的值。当监测的数据发生变化时,相应的方法会被触发执行。具体的写法有以下几种:
1. 监测data中已存在的值:
```javascript
watch: {
a: function(newVal, oldVal) {
// 执行相关操作
console.log(newVal, oldVal);
}
}
```
2. 监测函数:
```javascript
watch: {
data() {
console.log('数据发生变化');
}
}
```
3. 监测methods中的函数名:
```javascript
watch: {
data: 'changeData' // 值为methods中的方法名
},
methods: {
changeData(curVal, oldVal) {
console.log(curVal, oldVal);
}
}
```
4. 监测computed中的值:
```javascript
watch: {
computedValue: function(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
```
需要注意的是,watch监听的对象也可以是包括选项的对象,具体写法根据需求进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue watch关于对象内的属性监听](https://download.csdn.net/download/weixin_38555616/13667758)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue的watch使用 监听数据变化](https://blog.csdn.net/zsq199771/article/details/125481011)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]