Detailed explanation of how vue listens to changes in an object or array attribute

Preface

Listen to the changes of a certain attribute and dynamically modify the values of other attributes. This is a very common business scenario. For example, in a shopping cart, dynamically modify the total order amount displayed on the page according to the number of items added by the user. To achieve such a function, there are two main ways to achieve it. One is to usewatchListening, the other one is to usecomputedCompute properties.

Listen with watch

In Vue components, you can usewatchOptions to listen for changes in data. Suppose you have onedataProperties insourceProp, when it changes, you want to modify another propertytargetPropvalue.

export default {
   data() {
       return {
           totalMoney: 0.00,
           buyCount: 1
       };
   },
   watch: {
       buyCount(newValue, oldValue) {
           // When the buyCount changes, modify the value of totalMoney. Here 100 is the amount of a single product            = newValue * 100;
       }
   }
};

1、watchThe option is an object, where the key is the data attribute name to be listened to (herebuyCount), the value is a function. This function receives two parameters.newValueis the new value after the property changes.oldValueis the value before the change.

2. Inside the function, it can benewValueTo modify other properties (heretotalMoneyModified tonewValue * 100）。

In-depth monitoring

The above method is suitable for listening for a simple sense of familiarity. If the attribute to be listened to is an object or an array, and needs to listen for changes in the internal properties of the object, we cannot achieve our needs by using the above method. Deep monitoring is required at this time.

export default {
   data() {
       return {
           goodsInfo: {
               price: 100.00,
               buyCount: 1
           },
           orderTotalMoney: 0.00
       };
   },
   watch: {
       goodsInfo: {
           handler(newValue, oldValue) {
                =  * ;
           },
           deep: true// Turn on deep monitoring       }
   }
};

Deep listening brings some performance overhead because it recursively checks every property of an object. If you do not need to listen to all attribute changes inside the object, you can consider using shallow copy and other methods to manually compare the changes of the object.

Use Computing Properties

Computed attributes can be automatically calculated based on other data attributes and return a new value, and the result will be automatically cached. Although it does not directly monitor property changes, it can achieve similar effects.

export default {
   data() {
       return {
           totalMoney: 0.00,
           buyCount: 1
       };
   },
   computed: {
       totalMoney() {
           return  * 100;
       }
   }
};

Difference between watch and computed attributes

watchIt is mainly used to perform some side effects when attribute changes, such as asynchronous operations, modifying multiple attributes, etc. Computed attributes are mainly used to generate new data based on existing data, and have a cache mechanism, which will only be recalculated when the dependency attribute changes.

Using watchEffect (combination API) in Vue 3

In Vue 3's combined API, you can usewatchEffectTo implement monitoring of attribute changes.

import {ref, watchEffect} from 'vue';
export default {
    setup() {
        const totalMoney = ref(0);
        const buyCount = ref(0);
        watchEffect(() => {
             =  * 100;
        });
        return {
            totalMoney: 0.00,
            buyCount: 1
        };
    }
};

watchEffectThe function passed in will be executed immediately and the responsive data used in the function will be automatically tracked (here isbuyCount). When these responsive data change, the function is executed again. This will be based onbuyCountChanges and dynamic modificationstotalMoneyvalue.