watch介绍

• 简单监听

    //html
    <input type="text" v-model="name">
    //vue-js
    export default {
    name: "test",
    data() {
        return {
            name: "原始"
        };
    },
    watch: {
        name(newVal, oldVal) {  //第一个参数为修改后的新值，第二个为原来的值
            console.log(newVal + "--" + oldVal);
            }
        }
    };

• 最初绑定的时候就执行（immediate属性）

    watch: {
        name: {
        //watch方法默认写的就是handle，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
        handler(newVal, oldVal) {   
            console.log(newVal+"-"+oldVal)
        },
        // 代表在wacth里声明了name这个方法之后立即先去执行handler方法
        immediate: true
        }
    }

• 深度监听（deep）
  • 背景：默认情况下handler只监听name这个属性引用的变化，只有给name赋值的时候才会监听到。比如：

    mounted: {
        this.name = {
        a: '名字'
        }
    }

• 如果想监听对象下的属性，就需要使用deep:true进行深度监听

    watch: {
        name: {  // name 是一个对象名
            //watch方法默认写的就是handle，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
            handler(newVal, oldVal) {   
            console.log(newVal+"-"+oldVal)
            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
            immediate: true,
            deep: true   //进行深度监听
        }
    }

• 给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。优化：使用字符串形式监听

    watch: {
        //优化
        'name.a': {
        handler(newVal, oldVal) {
            console.log(newVal,oldVal)
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true,
        deep:true
        }
    }