vue watch监听变量值的实时变动示例详解
更新时间：2023年08月11日 15:02:35 作者：tenc1239
这篇文章主要介绍了vue 监听变量值的实时变动 watch,使用字符串形式的侦听器函数,还有一种是使用函数形式的侦听器函数,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
vue watch监听变量值的实时变动
1 使用字符串形式的侦听器函数
watch: {
'dataSetting.reverse_y'(newVal, oldVal) {
console.log(`reverse_y 值从 ${oldVal} 变成了 ${newVal}`);
}
}2 使用函数形式的侦听器函数
watch: {
'dataSetting.reverse_y': function (newVal, oldVal) {
console.log('reverse_y 值发生变化了，新值为：', newVal);
}
}3
在使用 Vue 的 watch 监听属性时，可以使用两种写法：
1.使用字符串形式的侦听器函数：'dataSetting.reverse_y' 这种写法会自动绑定到 Vue 实例上，并被解析为一个函数，函数内部的 this 指向 Vue 实例本身。
2.使用函数形式的侦听器函数：function (newVal, oldVal) {} 这种写法需要手动绑定，使用 bind 方法将函数绑定到 Vue 实例上，或者使用箭头函数，让函数内部的 this 自动绑定到 Vue 实例上。使用函数形式时，要使用 this.dataSetting.reverse_y 来访问 Vue 实例中的数据属性。
vue中watch监听数据变化的使用
1. 作用（父传子传孙中）
监听方法，一旦发现list传过来的toSun的值有变化，会重新执行新的方法
2. 问题
不使用会造成第一次请求的数据是对的，换一个数据请求会导致还是第一次的数据，没有更新数据
3. 写法
watch: {
toSun: {
handler(newVal, oldVal) {
// console.log(newVal, oldVal);
this.getUser();
this.getBank();
this.getAddressList();
},
deep: true,
immediate: true,
},
},4. 参考文献
到此这篇关于vue 监听变量值的实时变动 watch的文章就介绍到这了,更多相关vue watch监听变量值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
contenteditable 属性为网页开发者提供了一种灵活的方式来创建可编辑的内容区域,使用户可以直接在网页上进行内容编辑,而无需依赖传统的输入框,本文将利用contenteditable打造定制化输入,感兴趣的可以了解下2023-12-12
本文主要介绍了vue全局挂载实现APP全局弹窗的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家学习介绍了如何基于Vue实现简单的权限控制，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以了解一下2023-07-07
这篇文章主要为大家详细介绍了vue基于better-scroll仿京东分类列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue搜索和vue模糊搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue中对监听esc事件和退出全屏问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论