vue watch监听箭头函数
时间: 2023-12-01 08:43:25 浏览: 113
在Vue3中,如果你使用箭头函数来定义watch监听函数,会出现this指向错误的问题,因为箭头函数里面的this指向上下文中的this,但是watch里面后面的箭头函数没有上下文调用,所以就出现了undefined。正确的做法是使用普通的函数定义watch监听函数。下面是一个示例代码:
```javascript
watch: {
'form.psiType': function(newV, oldV) {
console.log('newV,oldV---', newV, oldV)
if (newV === 'OPRF') {
console.log('done---', this.form.remoteDataSetId)
this.form.remoteDataSetId.forEach(item => {
item.columnIn = []
})
}
console.log('done---')
}
}
```
相关问题
vue watch监听某个值的变化 数据无更新
在Vue中,当你使用`watch`监听某个值的变化时,如果你发现数据无更新,可能是因为以下原因:
1. 检查被监听的值是否在`data`中声明,且初始化后有被修改过。
2. 检查监听函数是否正确。如果你使用了箭头函数,那么`this`指向可能会出错。你可以尝试使用普通函数或者使用`vm.$watch`来避免这个问题。
3. 如果你正在监听一个对象或者数组,那么你需要使用`deep`选项来深度监听。否则只会监听到对象或数组的引用变化,而不是其内部的属性变化。
4. 如果你正在监听一个异步操作,比如`axios`请求的数据,那么你需要使用`immediate`选项来立即执行监听函数,否则只会在数据更新后才会执行。
5. 如果你使用了`watch`的`handler`选项,那么请确保它是一个函数,而不是一个字符串。如果你使用了字符串,那么Vue会在实例上查找同名方法,如果找不到则会报错。
希望这些提示能够帮助你解决问题。
vue3watch监听props
在Vue3中,可以使用watch函数来监听props的变化。监听props的方式有两种:一种是监听单个props,另一种是监听多个props。
如果要监听单个props,可以直接在setup函数中使用watch函数,并传入props作为第一个参数,回调函数作为第二个参数。例如:
```javascript
watch(props, (newProps, oldProps) => {
// 处理props的变化
});
```
在回调函数中,可以通过newProps和oldProps来获取新旧的props值。
如果要监听多个props,可以将props放在一个数组中,并传入watch函数。例如:
```javascript
watch(\[props1, props2, ...\], (\[newProps1, newProps2, ...\], \[oldProps1, oldProps2, ...\]) => {
// 处理props的变化
});
```
在回调函数中,可以通过newProps1、newProps2等来获取新的props值,通过oldProps1、oldProps2等来获取旧的props值。
需要注意的是,在watch函数中,可以使用箭头函数来定义回调函数,因为在setup函数中不需要考虑this的指向问题。此外,还可以通过第三个参数传入一个对象来配置watch的行为,比如设置深度监听或立即监听等。
希望以上信息对您有所帮助。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [Vue3的watch监听的多种情况](https://blog.csdn.net/m0_57482322/article/details/123157229)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3之watch监听](https://blog.csdn.net/weixin_39720860/article/details/114005689)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue3,使用watch监听props中的数据](https://blog.csdn.net/weixin_46683645/article/details/125481381)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文