Basic usage examples of listeners in Vue

Preface

Vue provides a more general way to respond to data changes through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

1. Basic usage of listener

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
el: '#demo',
data: { 
    firstName: 'Foo', 
    lastName: 'Bar', 
    fullName: 'Foo Bar' }, 
watch: 
    firstName: function (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: function (val) { 
        this.fullName = this.firstName + ' ' + val } } })

The purpose of this code is to monitor firstName and fullName, and when they change, change the value of fullname.

2. Listener Format

Listener in method format

• Disadvantage 1: It cannot be automatically triggered when you first enter the page!
• Disadvantage 2: If you are listening to an object, if the properties in the attribute change, the listener will not be triggered!

Object format listener

• Benefit 1: It can be automatically triggered as soon as you enter the page!
• Benefit 2: Deep monitoring can be achieved, that is, whether the attributes in the monitoring object have changed!

3. Trigger monitoring and deep monitoring as soon as the page is entered

Trigger the listener as soon as you enter the page

This is accomplished by adding the immediate option

const vm = new Vue({
    el: '#app',
    data: {
        info:
            username: 'admin'
        } 
    },
    watch:{
        info:
            handle(newVal){
                console.log(newVal)
            },
            // Trigger the listener as soon as the page is entered immediate: true
        }
    }
})

Deep Monitoring

In the above code, we cannot monitor successfully when username changes, because what changes is the value of the object attribute, so we need deep monitoring, just add the deep option

const vm = new Vue({
    el: '#app',
    data: {
        info:
            username: 'admin'
        } 
    },
    watch:{
        info:
            handle(newVal){
                console.log(newVal)
            },
            // Trigger the listener as soon as the page is entered immediate: true,
            // Implement deep monitoring. As long as any property of the object changes, the "object monitoring" will be triggered.
            deep: true
        }
    }
})

Deep listening returns the value of the sub-property of the listening object

The execution result of the above code is to print the info object. We want to print the value of username, but it is troublesome to add newVal.username. We can actually directly monitor and print the value of the changed sub-attribute. We only need to add a layer of single quotes around the sub-attribute to be monitored:

const vm = new Vue({
    el: '#app',
    data: {
        info:
            username: 'admin'
        } 
    },
    watch:{
        'info.username': {
            handle(newVal){
                console.log(newVal)
            }
        }
    }
})

at last

⚽This article introduces the basic use of listeners in Vue and how to implement deep listening. I hope you will gain something after reading it~

This concludes this article on the basic usage of listeners in Vue. For more information on the usage of Vue listeners, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!