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

 更新时间:2023年01月05日 08:31:54   作者:尤雨溪不懂VUE  
本文主要介绍了vue中watch监听不到变化的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

相关文章

  • vscode 使用Prettier插件格式化配置使用代码详解

    vscode 使用Prettier插件格式化配置使用代码详解

    这篇文章主要介绍了vscode 使用Prettier插件格式化配置使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 基于vue+face-api.js实现前端人脸识别功能

    基于vue+face-api.js实现前端人脸识别功能

    基于face-api.js要实现人脸识别功能,首先要将自己需要的模型文件下载保存在静态目录下,可以通过cdn的方式在index.html中引入face-api.js,本文给大家介绍vue+face-api.js实现前端人脸识别功能,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue的computed计算属性你了解吗

    Vue的computed计算属性你了解吗

    这篇文章主要为大家详细介绍了Vue的computed计算属性,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue篇之事件总线EventBus使用示例详解

    vue篇之事件总线EventBus使用示例详解

    这篇文章主要为大家介绍了vue篇之事件总线EventBus使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue3源码分析组件挂载创建虚拟节点

    Vue3源码分析组件挂载创建虚拟节点

    这篇文章主要为大家介绍了Vue3源码分析组件挂载创建虚拟节点,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue.js特性Scoped Slots的浅析

    Vue.js特性Scoped Slots的浅析

    这篇文章主要介绍了Vue.js特性Scoped Slots的浅析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue+Element ui实现照片墙效果

    vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 关于Vue实现组件信息的缓存问题

    关于Vue实现组件信息的缓存问题

    这篇文章主要介绍了关于Vue实现组件信息的缓存问题的相关资料,需要的朋友可以参考下
    2017-08-08
  • vue3 :deep()的使用教程

    vue3 :deep()的使用教程

    对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 在nuxt使用vueX代替storage的实现方案

    在nuxt使用vueX代替storage的实现方案

    这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论