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写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下2018-10-10
Vue.js中vue-property-decorator的使用方法详解
vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它2024-08-08
本篇文章主要介绍了浅谈Vue.js中ref ($refs)用法举例总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本文主要介绍了Vue3中同时定义多个插槽的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章主要介绍了Vue-Cli 3.0 中配置高德地图的两种方式，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue中使用loadsh的debounce防抖函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue-router 中hash模式和history模式的区别
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错，这篇文章主要介绍了Vue中关于this指向的问题 ,需要的朋友可以参考下2022-07-07
最新评论