八、watch的使用 ------ 2020-05-07

1、watch的基本使用

const vm = new Vue({
        el: '#app',
        data: {
            firstName: '二狗',
            lastName: '刘',
            xx: '1'
        },
        watch: {
            firstName(newVal, oldVal) {
                console.log(newVal, oldVal);
            },
            lastName(newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    })
// watch的作用：用来监控数据的变化，只要监控的数据发生了
// 变化，就会触发对应的函数；

2、watch写成对象使用

const vm = new Vue({
        el: '#app',
        data: {
            firstName: '二狗',
            lastName: '刘',
            xx: '1'
        },
        watch: {
            firstName: {
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
                immediate: true, // 立马执行一次
                deep: true // 深度监控，watch默认只能监控一层，如果是深度嵌套的对象，
                // 是监测不到数据的变化的

            },
            lastName: {
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
                immediate: true,
                deep: true
            }
        }
    })