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 watch监听变量值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！