复习侦听器watch

作用：侦听属性，响应数据（data&computed）的变化，当数据变化时，会立即执行对应函数，其属性值可以为函数、字符串、对象和数组。

1.属性值类型
（1）函数类型
函数类型中，被侦听的数据作为函数名，当数据改变时，执行 watch() 中对应的函数，该函数可以接受两个参数，第一个参数是 newVal（改动后的数据），第二个参数是 oldVal （改动前的数据），如下例

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '《JavaScript设计模式》'
    },

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

（2）字符串类型
key 为 被侦听的数据，value 为方法名字，当被侦听的数据改变时，会执行该方法，如下例

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '《JavaScript设计模式》'
    },
   

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

（3）对象类型
对象类型包含3个属性，handle函数（必选），deep和immediate（可选） 

1）handler
handler 为被侦听的数据改变时执行的回调函数，其值类型为函数 / 字符串（函数名）

<div id="app">
    {{ bookName }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        bookName: '《JavaScript设计模式》',
    },

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

2）deep 
在默认情况下，侦听器侦听对象只侦听引用的变化，只有在给对象赋值时它才能被监听到，所以需要使用 deep 选项，让其可以发现对象内部值得变化，讲 deep 得值设置为 true，那么无论该对象被嵌套得有多深，都可以被侦听到。但是当对象的属性较多时，性能开销比较大。因此可以选择只侦听对象的某个属性

【例1】

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '《JavaScript设计模式》',
            press: '人民邮电出版社',
            writer: 'Addy'
        }
    },
 

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

 

3）immediate
immediate 选项可以使侦听开始后立刻被调用，而不是等待侦听的数据更改后才会调用

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '《JavaScript设计模式》',
            press: '人民邮电出版社',
            writer: 'Addy'
        }
    },

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

 4）只侦听对象的某个属性
将对象的属性放在字符串中当作函数名，当该对象中的该属性值发生变化时，执行回调函数

<div id="app">
    {{ book.press }}
</div>
const vm = new Vue({
    el: '#app',
    data: {
        book: {
            bookName: '《JavaScript设计模式》',
            press: '人民邮电出版社',
            writer: 'Addy'
        }
    },

    watch: {
        'book.press'() {
            console.log('book.press改变了')
        }
    }

})