Vue.js Array Change Detection

Vue.js is a progressive JavaScript framework known for its simplicity and flexibility in building robust user interfaces. One of the key aspects that sets Vue.js apart is its efficient change detection system. In this article, we will delve into the concepts of Vue.js array change detection and explore how Vue.js handles changes within arrays.

Vue.js utilizes a reactive data-binding system, allowing developers to create dynamic web applications with minimal effort. In Vue.js, when we bind a data property to the UI, Vue.js automatically tracks the changes in the data and updates the DOM accordingly. This mechanism is called Reactivity. The detection of the changes in the array can be identified by the following process:

• Mutation Methods: When the reactive array’s mutation methods are invoked & triggered for the essential updates, which are easily detected by the VueJS. The push(), pop(), shift(), unshift(), splice(), sort(), and reverse() are the different mutation methods provided by the VueJS.
• Replacing an Array: Another technique to detect the changes in the array is to mutate the original array while invoking the various mutation methods. The other methods are also facilitated by VueJS which always returns a new array, instead of mutating the original array.

Below are the different approaches for detecting the changes in the Array:

We will explore the above approaches, along with understanding its basic implementation through the illustrations.

Detecting Insertion and Removal in Array

When it comes to arrays in Vue.js, it can detect changes in array length, such as adding or removing elements using push(), pop(), shift(), and unshift(), and is instantly reflected on the User interface.

Example:

HTML

<template>
    <div class="container">
        <div>{{ array }}</div>
        <div class="buttons">
            <button v-on:click="addItem()">
                  Insert
              </button>
            <button v-on:click="removeItem()">
                  Remove
              </button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                array: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            addItem() {
                const num = this.getRandomNumber(1, 100)
                this.array.push(num)
            },
            removeItem() {
                if (this.array.length > 0) {
                    this.array.pop()
                }
            },
            getRandomNumber(min, max) {
                return Math.round(Math.random() * (max - min) + min);
            }
        },
    }
</script>

Output:

Detecting Change in Array value

Whenever we modify the array using the index, the change is automatically updated on the User interface due to the data binding property of VueJS.

Example:

HTML

<template>
    <div class="container">
        <div>{{ array }}</div>
        <div class="buttons">
            <button v-on:click="changeItem()">
                  Change First Value
              </button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                array: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            getRandomNumber(min, max) {
                return Math.round(Math.random() * (max - min) + min);
            },
            changeItem() {
                this.array[0] = this.getRandomNumber(1, 10);
            }
        },
    }
</script>

Output:

Detecting change in an Array of Objects

Similarly, when any object in the array is modified, the change in value is also visible on the UI instantly. Vue.js applications respond efficiently to data changes, providing seamless user experiences with its reactivity feature.

Example:

HTML

<template>
    <div class="container">
        <div v-for="(user,index) in array"
             :key="index">
              {{ user.name }}
          </div>
        <div class="buttons">
            <button v-on:click="changeItem()">
                  Change Name
              </button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                position: 0,
                array: [{ name: 'Rahul' },
                        { name: 'Neena' },
                        { name: 'Sara' }]
            }
        },
        methods: {
            changeItem() {
                this.array[this.position].name = "Tina"
                this.position++;
            }
        },
    }
</script>

Output:

Reference: https://vuejs.org/guide/essentials/list.html#array-change-detection