How to use watch in Vue to monitor changes in an array

How to use watch to monitor changes in arrays in Vue

Vue is one of the most widely used frameworks in front-end development. It provides many convenient ways to implement data responsiveness, template rendering and componentization. and other functions. In Vue, we often use watch to monitor data changes. However, when we need to monitor array changes, we need to pay attention to some details.

In Vue, we can use watch to monitor changes in a single property or object. The basic usage is as follows:

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

If we want to monitor changes in an array, we need to pay attention to the following points:

1. Use the vm.$watch method

Vue provides the vm.$watch method to monitor data changes. This method returns a function to cancel monitoring. The vm here refers to the instance of Vue. For arrays, we can use this method to monitor changes in the array. Its basic usage is as follows:

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

The arr here is the array we need to monitor. newVal and oldVal in the handler callback function represent the monitored new value and old value respectively. In addition, since it is common for each element in the array to be an object, you need to set deep to true to achieve deep monitoring.

It should be noted that Vue will not automatically hijack the array monitored using the vm.$watch method. Therefore, we need to manually hijack the array to monitor changes in the array.

2. Monitor each element in the array

If we need to monitor changes in each element in the array, we can use the immediate and handler parameters in the vm.$watch method. The code is as follows:

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

The immediate here is true, which means that the callback function will be executed once when listening. It should be noted that the above code does not hijack the entire array, but monitors each element individually.

3. Use computed properties

The calculated properties in Vue can calculate new data based on existing data, so we can use calculated properties to monitor changes in the array. Its basic usage is as follows:

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

The arrWatcher here is the calculated property we defined, and the return value of the calculated property is the monitored array. Just monitor the changes of the calculated property in watch. Since calculated properties automatically collect dependencies, when the array changes, the calculated properties are automatically updated, triggering the watch callback function.

When using computed properties to monitor array changes, you need to pay attention to one thing: If we only need to monitor changes in the length of the array and do not care about changes in the elements in the array, then we can simply use computed properties to achieve it. But if you need to monitor changes in elements in the array, you also need to hijack each element in the array, and you also need to use the vm.$watch method.

To sum up, we can use the vm.$watch method, monitor each element in the array, and use calculated properties to monitor changes in the array in Vue. It is important to note that when using these methods, the array should be hijacked to ensure that Vue can correctly monitor changes in the array.

The above is the detailed content of How to use watch in Vue to monitor changes in an array. For more information, please follow other related articles on the PHP Chinese website!