SoFunction
Updated on 2025-04-11

Solution to the failure of watch monitoring in vue to change

Watch cannot listen for changes inside the object

Sometimes this phenomenon occurs in vue, and it is impossible to monitor changes within complex objects: when there is a certain property in the object and operates on this property, watch can monitor changes in the current property. However, if this property is not present in the object, the property will be added during operation, and the subsequent operations on this property will not be detected by watch.
This is because the vue watch will listen for internal changes by adding a watcher to each property of the object during initialization. Therefore, the attributes added later cannot be detected.

Solution:

If you want to add a property after initialization and perform a monitoring operation, you can use $set:

// this.$set(object, key, value)
// Use this.$set to listenthis.$set(, 'a', ())

The two parameters of the handler method of watch are the same.

For a data, if the value changes, if you want to record the two values ​​before and after the change, you can use the handler method. The first parameter is the new value after the change, and the second is the old value before the change.
However, if this value is a complex object, if you want to record the changes in the properties inside, use handler, both parameters are the new values ​​after the change.

Solution:

Combining computed attributes, serialization, and deserialization to generate new objects to avoid this problem

 data () {
    return {
      obj: {}
    }
  },
  computed: {
    // If you want to get different content, you can combine calculation properties, serialization, and deserialization to generate new objects to avoid this problem.    obj2 () {
      return (())
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        ('data has changed')
        (newVal, oldVal)
      },
      deep: true
    }
  },

All codes

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

<script>
export default {
  name: 'Mall',
  data () {
    return {
      // !Add to each property when listening, add getter and setter. If the change is made, the handler function will be triggered. If the property is added later, this property cannot be listened to.      // obj: {
      //   a: 10
      // }

      // !This cannot be monitored      // Because watch adds a listener to each existing property of the object through()      // Add the a property directly afterwards, there is no listener on it, so it will not be listened to      obj: {}
    }
  },
  computed: {
    // If you want to get different content, you can combine calculation properties, serialization, and deserialization to generate new objects to avoid this problem.    obj2 () {
      return (())
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        ('data has changed')
        (newVal, oldVal)
      },
      deep: true
    }
  },
  methods: {
    clickFn () {
      //  = ()

      // this.$set(object, key, value)
      // Use this.$set to listen      this.$set(, 'a', ())
    }
  }
}
</script>

This is the end of this article about the solution to the inability to listen to watch in vue. For more related contents in vue watch, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!