vue的watch监听器

官方解释：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch，遍历 watch 对象的每一个 属性。

 从代码上看就是在监听内容发生改变时，触发一些事

1.属性

1.简单监听

当数据发生变化时，打印newValue与oldVal

watch: {
    name(newVal, oldVal) {
        // 当数据发生变化时，打印newValue与oldVal
        console.log(newVal, newVal);
    }
}

2.深度监听 

deep: true/false  是否开启深度监听（是否监听复杂类型内的数据变化）

immediate: true/flase  是否立即侦听(页面初始化时handler立即执行一次)

data(){
    return {
        user: {
            name: "",
            age: 0
        }
    }
},
watch: {
    user: {
        // 固定写法
        handler(newVal, oldVal){
            console.log(newVal, oldVal);
        },
        // deep: true/false  是否开启深度监听（是否监听复杂类型内的数据变化）
        deep: true,
        // immediate: true/flase  是否立即侦听(页面初始化时handler立即执行一次)
        immediate: true
    }
}

2.使用

1.当数据发生变化时进行数据处理

当 name 值发生改变时，将 ageChange 取反

<template>
    <div>
        <input type="text" v-model="name">
        <span>{{ ageChange }} </span>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name: "",
            ageChange :true
        }
    },
    watch: {
        name(newVal, oldVal){
            this.ageChange = !this.ageChange
        }
    }
}
</script>

2.当进入页面时不进行数据处理，且只在第一次时不处理

当 age 刚进入页面时，不将 name 值清空，只有当用户手动改变 age 的值以后才需要改变

<template>
    <div>
        <input v-model="age">
        <span>{{ name }}</span>
    </div>
</template>
<script>
export default {
    data(){
        return {
            age: 6,
            name: '李四'
        }
    },
    // 目标: 侦听到name值的改变
    watch: {
        name(newVal, oldVal){
            if(!oldValue && newvalue) return
            this.age = ''
        }
    }
}
</script>