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:
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:
Table of Content
- Detecting Insertion and Removal in Array
- Detecting Change in Array value
- Detecting change in an Array of Objects
We will explore the above approaches, along with understanding its basic implementation through the illustrations.