Detailed explanation of how Vue monitors array changes

In Vue, if you operate on the array directly, such as using the subscript to directly modify the elements, and the length of the array remains unchanged, Vue cannot monitor this change, resulting in the inability to trigger view updates. To address this problem, the following solutions are summarized:

1. Use the provided methods to update the array

In, you can use(target, key, value)orvm.$set(target, key, value)To monitor array changes. For example:

// use ()(, indexOfItem, newValue)

// Use vm.$setvm.$set(, indexOfItem, newValue)

In addition to the above methods, some other methods are provided to monitor array changes, such aspush()、pop()、shift()、unshift()、splice()、sort()andreverse(). These methods are based on methods on the array prototype chain, and they are rewriting these methods to monitor array changes.

For example, if you want to add a new element at the end of an array, you can use(newItem)。

You can also use = newLengthto modify the array length, which will also trigger view updates.

In short, in , if you want to monitor array changes, it is best to use the method provided by .

2. Use syntactic sugar specifically used to monitor array changes

Additionally, some syntactic sugars are provided specifically for monitoring array changes, such as the v-for directive, which allows us to iterate through the array and render each element. The v-for directive automatically rerenders the view when the array changes.

3. Use the () function

Also, for monitoring object changes, we can use the() function to create a monitorable object.

Use () to avoid using () or vm.$set() to monitor changes in objects.

For example:

const obj = ({
  prop: 'value'
})

4. Use the computed attribute and watch attribute to monitor array changes

The computed property is a computed property in , which can calculate the value of other properties to obtain a new value. When the values ​​of other properties change, the computed property will also change.

The watch attribute is a monitoring attribute in , which can listen for changes in a certain attribute and execute corresponding functions.

For example:

computed: {
  filteredItems() {
    return (item =>  > 18)
  }
},
watch: {
  items: {
    immediate: true,
    handler() {
      ('items changed')
    }
  }
}

Use the computed and watch attributes to easily monitor changes in arrays and objects and perform corresponding operations.

5. Use the Deep Watcher method

watch: {
  'myArray': {
    deep: true,
    handler: function (val) {
    // do something with the new and old value of myArray
    }
  }
}

When deep is true, Vue will recursively monitor the changes of all objects in the array, but it will bring some performance overhead. Therefore, in actual use, you need to determine whether to use deep watcher according to actual needs.

6. Use the $watch function

mounted() {
  this.$watch(
    'myArray',
    function(newVal, oldVal) {
      // do something with the new and old value of myArray
    },
    {
      deep: true
    }
  )
}

The $watch method receives three parameters. The first is the attribute to be monitored, the second is the callback function, and the third is the configuration object. You can use the deep option to monitor changes in the object.

7. Use Vue's $forceUpdate() method

Use Vue's $forceUpdate() method to force component re-rendering so that changes in the array can be monitored.

this.$forceUpdate()

Doing this will force re-render the component, but this will have some performance overhead, so it is not recommended to use $forceUpdate() frequently in the component.

8. Use the $nextTick() method in Vue

Use the $nextTick() method in Vue to monitor array changes. The $nextTick() function can execute a delayed callback after the next DOM update loop ends.

this.$nextTick(() => {
  // your code
})

This ensures that relevant operations are performed after the array changes, so that changes in the array can be monitored.

9. Use reactive functions

existVue3Can be usedreactiveFunctions to create responsive arrays, so that changes in the array can be monitored.

import { reactive } from 'vue'

const state = reactive({
  myArray: [1, 2, 3]
})

In this way, Vue3 will automatically monitor myArray changes.

10. Use the track function in vue-devtools

Note: This method cannot solve the problem of modifying the array without triggering view update, which is an array monitoring problem.

In short, there are many methods to monitor changes in arrays and objects, such as using (), splice(), $set(), $delete(), watch, computed, $watch(), "track" function in vue-devtools, reactive functions in Vue3, $forceUpdate() and $nextTick() and other methods, you can choose the appropriate method to implement it according to your needs.

This is the end of this article about how Vue monitors array changes. For more information about Vue monitoring array changes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!