vue中watch监听不到变化的解决

目录
  • watch监听不到对象内部的变化
  • 解决方法：
  • watch的handler方法的两个参数值相同
  • 解决方法：
  • 全部代码

watch监听不到对象内部的变化

有的时候vue会出现这种现象，无法监听到复杂对象内部的变化：当对象里面原本有某一个属性，并对这个属性操作时，watch是可以监听到当前属性的变化的。但是，若对象里面本没有这个属性的时候，在操作时将属性添加进去，同时包括之后对这个属性的操作，watch是都检测不到的。
这是因为vue的watch会在初始化的时候通过object.defineProperty给对象的每一个属性都添加watcher来监听内部的变化。所以，后期添加上去的属性是无法检测到的。

解决方法：

如果想在初始化后添加一个属性并进行监听操作，可以使用$set：

// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())

watch的handler方法的两个参数值相同

一个数据，如果值发生了变化，如果想要记录变化前和变化后的两个值，可以使用handler方法，第一个参数为变化后的新值，第二个为变化前的旧值。
但是如果这个值是复杂对象，如果想记录里面的属性的变化，使用handler，两个参数均为变化后的新值。

解决方法：

结合计算属性、序列化、反序列化生成新的对象，来避免此问题

 data () {
    return {
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。
    obj2 () {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        console.log('data变化了')
        console.log(newVal, oldVal)
      },
      deep: true
    }
  },

全部代码

<template>
  <div>
    <button @click="clickFn">++++</button>
  </div>
</template>

<script>
export default {
  name: 'Mall',
  data () {
    return {
      // !监听时给每一个属性都添加getter和setter，变化了，就触发handler函数，如果后期添加属性，这个属性不可以被监听到
      // obj: {
      //   a: 10
      // }

      // !这种是不可以被监听到的
      // 因为watch是通过Object.defineProperty()给对象的每一个现有属性增加监听器
      // 在后面直接添加a属性，身上没有监听器，所以不会被监听到
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。
    obj2 () {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        console.log('data变化了')
        console.log(newVal, oldVal)
      },
      deep: true
    }
  },
  methods: {
    clickFn () {
      // this.obj.a = Math.random()

      // this.$set(object, key, value)
      // 使用this.$set就可以监听到
      this.$set(this.obj, 'a', Math.random())
    }
  }
}
</script>

到此这篇关于vue中watch监听不到变化的解决的文章就介绍到这了,更多相关vue watch监听不到内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中watch的使用详解

    目录 Vue3中watch的详解 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 Vue3中watch的详解 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • Vue不能watch数组和对象变化解决方案

    目录 Vue 能监听数组的情况 Vue 无法监听数组变化 举例无法监听数组变化的情况 Vue 无法监听数组变化的解决方案 Vue 监听对象 Vue 设置监听对象 Vue 能监听数组的情况 Vue 监听数组和对象的变化(vue2.x) vue 实际上可以监听数组变化,比如: 直接 = 赋值 data () { return { watchArr: [], }; }, watch: { watchArr (newVal) { console.log('监听:' + newVal); } }, cre

  • Vue watch原理源码层深入讲解

    Vue watch原理源码层深入讲解

    目录 添加依赖 触发依赖 总结 由于我在从源码看vue(v2.7.10)的computed的实现原理中详细的讲解过computed的实现,本篇跟computed的原理类似.我就带大家简单分析一下. 添加依赖 代码如下: <template> <div> {{a}} <button @click="addModule">新增</button> </div> </template> <script> exp

  • Vue watch监听使用的几种方法

    目录 一.watch使用的几种方法 二.watch中的immediate与handler和deep属性 一.watch使用的几种方法 1. 通过 watch 监听 msg 数据的变化. watch: { msg(oldValue, newValue) { console.log(oldValue) console.log(newValue) } } 2.通过 watch 监听 obj数据的变化.(深度监听 deep) data() { return { obj: { 'name': "赵&quo

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • vue中watch的实际开发学习笔记

    目录 前言 一.watch是什么 二.watch不同的实际使用场景开发案例 1.场景1:加载完成后登录监听 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容 3.场景3:深度监听 4.场景4:赋值使用 5.场景5:改变标记的true和false 6.场景6:页面的跳转 补充:watch简写形式 总结 前言 本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验. 一.watch是什么 根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对

  • vue中watch监听不到变化的解决

    目录 watch监听不到对象内部的变化 解决方法: watch的handler方法的两个参数值相同 解决方法: 全部代码 watch监听不到对象内部的变化 有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro

  • 关于vue中如何监听数组变化

    关于vue中如何监听数组变化

    前言 前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.

  • vue中watch监听对象中某个属性的方法

    目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne

  • Angular2监听页面大小变化的解决方法

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo

  • vue中实现监听数组内部元素

    vue中实现监听数组内部元素

    目录 vue监听数组内部元素 我们有两种办法解决此问题 vue如何监听数组的变化 vue监听数组内部元素 在VUE中,对数组的监听是浅监听,也就是它只能监听到数组的长度或者有无的变化,当我们修改数组中的某一个值时,也就是数组的长度状态并没有改变时,在正常情况下它是无法监听到的,在watch中我们知道可以使用deep属性进行深监听,那么在其他情况下呢? 我们有两种办法解决此问题 1.通过原生的js对数组先进行切割,然后在添加新的内容(也就是我们要修改的内容) array.splice(i, 1,

  • vue中对监听esc事件和退出全屏问题的解决方案

    vue中对监听esc事件和退出全屏问题的解决方案

    目录 对监听esc事件和退出全屏问题的解决 下面是全屏的完整代码 element+vue全屏与退出全屏(监听ESC改样式) 一.效果 二.代码 对监听esc事件和退出全屏问题的解决 vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件 mounted() {          let that = this     window.addEven

  • 关于Vue不能监听(watch)数组变化的解决方法

    目录 一.vue监听数组 二.vue无法监听数组变化的情况 一.vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchArr: [], }; }, watchArr (newVal) { console.log('监听:' + newVal); }, created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000); }, 在比如使用splice(0,2,3)从数组下标0删除两个元

  • vue中同时监听多个参数的实现

    目录 如何同时监听多个参数 data中定义一个对象 完整代码 vue事件监听,条件判断 事件监听 v-on 条件判断 如何同时监听多个参数 vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watch data中定义一个对象 data(){     return{         obj:{             name:'xpf',             gender:'male',             age:2

  • Vue中watch监听第一次不触发、深度监听问题

    目录 watch监听第一次不触发.深度监听 第一次不触发 例如 vue watch使用无效问题 watch监听第一次不触发.深度监听 第一次不触发 handler:其值是一个回调函数.即监听到变化时应该执行的函数. deep:其值是true或false:确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到.) immediate:其值是true或false:确认是否以当前的初始值执行handler的函数 例如 我将父组件中的WatchId传递到这个子组件页面我要根据

  • 用Vue.js实现监听属性的变化

    前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:

随机推荐