Basic Usage Example of Listeners in Vue

Directory preface 1. Basic usage of listeners 2. The format of listeners 3. The implementation just entered the page to trigger listening and deep listening
Depth Listening Depth Listening returns the value of the subproperty of the listener object last

Preface

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

1. Basic use of listeners

<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 listen for firstName and fullName, and change the value of fullname when they change.

2. Format of listener

Listener in method format

Disadvantage 1: It can't be triggered automatically when entering the page! Disadvantage 2: If you are listening to an object, if the property in the property changes, the listener will not be triggered!

Listener in object format

Benefit 1: You can realize automatic trigger when you just enter the page! Benefit 2: You can realize deep monitoring, that is, whether the attributes in the monitoring object change!

3. Trigger monitoring and deep monitoring as soon as you enter the page

Trigger listening as soon as you enter the page

By adding the immediate option

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            //  Realize triggering monitoring as soon as you enter the page 
            immediate: true
        }
    }
})

Depth monitoring

In the above code, we can't listen successfully when username changes, because the change is the value of object attribute, so we need to listen deeply, and add deep option

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            //  Realize triggering monitoring as soon as you enter the page 
            immediate: true,
            //  Realize deep monitoring , As long as any of the objects 1 If a property changes, it will trigger "object listening" 
            deep: true
        }
    }
})

Deep Listening Returns the Value of the Subproperty of the Listening Object

The execution result in the above code is to print the object info. It is still troublesome to add newVal. username to the value of username that we want to print. In fact, we can directly monitor and print the value of changing sub-attributes, only need to add 1 layer of single quotation marks outside the sub-attributes to be monitored:

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

Finally

⚽ introduced the basic use of listeners in Vue and how to realize deep monitoring. I hope everyone will get a certain harvest after reading it ~