Vue-watch

在 vue 中使用 watch 相应数据的变化，大致有三种使用方法：

第一种：

直接监听 data 中的某个数据的变化，有两种写法

<input type="text" v-model="Name">

<script>
export default {
    data() {
        return {
            Name: '张三'
        }
    },
    watch: {
        Name(newName,oldName) {
            // .....
        }
        // Name: 'NameChange' 或者这样绑定一个方法名
    },
    methods: {
        NameChange() {
            // ...
        }
    }
    
}
</script>

第二种：

使用 immediate 和 handler 属性

immediate

在使用 第一种方法的时候，有一个需要注意的地方，就是 watch 在第一次绑定的时候不会执行监听函数，只有监听的值发生变化时才会执行函数，这时候我们如果想要在第一次绑定的时候就执行一次函数的话就需要 immediate 这个属性。

<script>
export default {
    data() {
        return {
            Name: '张三'
        }
    },
    watch: {
        Name: {
            handler(newVal,oldVal) {
                // ...
            },
            immediate: true
        }
    }
}
</script>

handler

handler 就是数据变化之后执行的函数

第三种：

使用 deep

deep

如果我们要监听的值是一个对象中的属性的话，就需要加上 deep 这个属性，来让 watch 进行深入监听

<script>
export default {
    data() {
        return {
            People: {
                Name: "张三",
               Age: 18,
               Sex: 'M'
            }
        }
    },
    watch: {
        People: {
            hadler(newVal,oldVal) {
                //....
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

上面这种写法会给 People 的每个属性都绑定一个 handler，如果想指定监听具体的哪个属性的话，可以 '对象.属性' 的方式

<script>
export default {
    watch: {
        'People.Name': {
            handler() {},
            immediate: true,
            deep: true
        }
    }
}
</script>