深入观察不处理对象 Vue

Question

I have a watcher setup on an array and I have deep watch enabled on it, however the handler function does not trigger when the array changes, applications is defined in the object returned in data. Here's the code:

  watch: {
    applications: {
      handler: function(val, oldVal) {
        console.log('app changed');
      },
      deep: true,
    },
    page(newPage) {
      console.log('Newpage', newPage);
    },
  },

Answer 1

Vue cannot detect some changes to an array such as when you directly set an item within the index:

eg arr[indexOfItem] = newValue

Here are some alternative ways to detect changes in an array:

Vue.set(arr, indexOfItem, newValue)

or

arr.splice(indexOfItem, 1, newValue)

You can find better understanding of Array Change Detection here

Answer 2

If you reset your array with arr[ index ] = 'some value' , Vue doesn't track to this variable. It would better to use Vue array's mutation method . These methods used to track array change detection by Vue.

It is worked for me.