Function: listen for attributes and respond to data & calculated changes. When the data changes, the corresponding function will be executed immediately. The attribute values can be functions, strings, objects and arrays.

1. Attribute value type
(1) Function type
In the function type, the intercepted data is used as the function name. When the data changes, execute the corresponding function in watch(). The function can accept two parameters. The first parameter is newVal (changed data) and the second parameter is oldVal (changed data), as shown in the following example

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '<JavaScript Design mode'
    },

    watch: {
        bookName(newVal, oldVal) {
            console.log('newVal:', newVal)
            console.log('oldVal:', oldVal)
        }
    }
})

(2) String type
key is the intercepted data and value is the method name. When the intercepted data changes, the method will be executed, as shown in the following example

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '<JavaScript Design mode'
    },
   

 methods:{
        bookNameChange(){
            console.log(this.bookName);
        }
    },
    watch: {
        bookName: 'bookNameChange'
    }
})

(3) Object type
The object type contains three attributes, handle function (required), deep and immediate (optional)  

1)handler
handler is the callback function executed when the intercepted data changes, and its value type is function / string (function name)

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '<JavaScript Design mode',
    },

    watch: {
        bookName: {
            handler() {
                console.log(this.bookName)
            }
        }
    }
})

2)deep 
By default, the listener listens to the object only for the change of reference. It can only be listened to when assigning a value to the object. Therefore, you need to use the deep option to find the internal value change of the object. If the value of deep is set to true, the object can be listened to no matter how deep it is nested. However, when there are many attributes of an object, the performance overhead is relatively large. Therefore, you can choose to listen only to a property of the object

[example 1]

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '<JavaScript Design mode',
            press: 'People's Posts and Telecommunications Publishing House',
            writer: 'Addy'
        }
    },
 

   watch: {
        book: {
            handler() {
                console.log('book.press Changed')
            },
            deep: true
        }
    }
})

 

3)immediate
The immediate option enables the listener to be called immediately after the start of listening, rather than waiting for the listening data to change

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '<JavaScript Design mode',
            press: 'People's Posts and Telecommunications Publishing House',
            writer: 'Addy'
        }
    },

    watch: {
        book: {
            handler() {
                console.log('handler Yes')
            },
            deep: true,
            immediate: true
        }
    }
})

  4) Listen only for a property of an object
Put the attribute of the object in the string as the function name, and execute the callback function when the value of the attribute in the object changes

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '<JavaScript Design mode',
            press: 'People's Posts and Telecommunications Publishing House',
            writer: 'Addy'
        }
    },

    watch: {
        'book.press'() {
            console.log('book.press Changed')
        }
    }

})