Vue2.0 解决watch对象属性变化监听不到问题

系统管理员 2023-06-10 15:25 14阅读 0赞

很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。解决  
为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html  
**解决方式： **  
通过vue的this.$set(object, key, value)方法  
通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign(\{\}, this.someObject, \{ a: 1, b: 2 \})  
**代码实例**

<template>
      <div>
        <p @click="fun1" style="color: blue">方式一</p>
        <p @click="fun2" style="color: blue">方式二</p>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          p: {a: 1}
        }
      },
      methods: {
        fun1 () {
          console.log('click 1111')
          // this.p.b = 2 // 通过点方法赋值，发现观察不到p的变化
          this.$set(this.p, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化
        },
        fun2 () {
          console.log('click 2222')
          this.p = Object.assign({}, this.p, {c: 3})
        }
      },
      watch: {
        p: {
          handler (cval, oval) {
            console.log('--------')
            console.log(cval, oval)
          },
          deep: true
        }
      }
    }
    </script>
    
    <style>
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 深度监听watch（如何watch监听一个对象内部的变化）

. 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2. 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能...

布满荆棘的人生/ 2024年04月19日 13:08/ 0 赞/ 99 阅读

相关 vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）

简述：vue中的watch属性大家都比熟悉，是vue的监听属性，监听数据的变化触发执行函数，可以监听数据和路由，这里给大家总结了一下watch在vue2和vue3中的使用详细

快来打我*/ 2023年10月04日 23:39/ 0 赞/ 61 阅读

相关 Vue2.0 解决watch对象属性变化监听不到问题

很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法

系统管理员/ 2023年06月10日 15:25/ 0 赞/ 15 阅读

相关 Vue中监听属性的变化

在Vue中有属性typeId 当属性变化的时候执行函数 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

小灰灰/ 2023年05月31日 03:24/ 0 赞/ 197 阅读

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 279 阅读

相关 Vue使用watch监听一个对象中的属性

问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发响应的办法：比如 queryData: { name:

怼烎@/ 2022年10月13日 12:58/ 0 赞/ 215 阅读

相关 uniapp 使用 watch 监听属性的变化

<input type="text" v-model="propName"/> watch: \{ propName: \{ han

雨点打透心脏的1/2处/ 2022年09月05日 00:27/ 0 赞/ 1448 阅读

相关 vue watch属性的简单使用，watch监听对象变化

代码中监听了一个简单的属性currentPage和一个对象selectForm,只要它们的值一改变就会触发其中的逻辑函数或者异步请求 watch: {

浅浅的花香味﹌/ 2022年04月08日 08:42/ 0 赞/ 408 阅读

相关 vue 2.0 watch 监听对象的变化

导读使用 `Vue` 中的 `watch` 方法监听对象，设置 `deep:true` 可以进行深度监听，当对象中的属性发生变化时，会调用 `handler` 方法。

矫情吗；*/ 2022年01月07日 13:47/ 0 赞/ 659 阅读

相关 vue组件props属性监听不到值变化

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，遂查看vue文档，得知watch有一种深度监听的方法。阅读vue文档如下代码。=》

ゝ一世哀愁。/ 2021年09月25日 00:14/ 0 赞/ 1323 阅读