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监听变量值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在实际项目开发中,我们会经常与图表打交道,比如 订单数量表、商品销量表、会员数量表等等,它可能是以折线图、柱状图、饼状图等等的方式来展现,下面这篇文章主要给大家介绍了关于vue项目中封装echarts的优雅方式的相关资料,需要的朋友可以参考下2022-03-03
这篇文章介绍了Vue中的生命周期，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了Vue通过封装全局获取焦点指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-12-12
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下2018-10-10
本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
今天小编就为大家分享一篇element-ui 设置菜单栏展开的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了基于ElementUI中Table嵌套实现多选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
本篇文章主要介绍了如何理解Vue的.sync修饰符的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论