Introduction to methods of Vue monitoring objects and methods of monitoring properties in objects (code)

The content of this article is about the methods of Vue monitoring objects and the introduction (code) of the methods of monitoring the properties in the objects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

To monitor the entire object, just use watch

export default {
    data() {
        return {
            a: {
                b: 1,
                c: 2
            }
        }
    },
    watch() {
        a: {
            handler(newVal, oldVal) {
                console.log('监听a整个对象的变化');
            },
            deep: true
        }
    }
}

To monitor changes in specific properties of the object, you need to use watch with computed

export default {
    data() {
        return {
            a: {
                b: 1,
                c: 2
            }
        }
    },
    watch() {
        bChange() {
            console.log('监听a对象中b属性的变化');
        }
    },
    computed: {
        bChange() {
            return this.a.b;
        }
    }
}

Related recommendations:

Introduction to the properties and methods of basic JavaScript objects_Basic knowledge

Usage of Vue data monitoring method watch_vue.js

Use Vue.js to monitor property changes

The above is the detailed content of Introduction to methods of Vue monitoring objects and methods of monitoring properties in objects (code). For more information, please follow other related articles on the PHP Chinese website!