Vue watch 监听器

监听器

监听data中属性的变化。

方法监听器

缺点

1. 无法在初始化加载时自动触发。
2. 监听的是对象，对象中的属性变化无法触发。

使用

watch中增加与需要被监听的属性的名字相同的方法，第一个参数是变化后的值，第二个参数是变化前的值。

对于对象中的属性，可以通过"对象.属性"的方法来监听（注意双引号）。

const vm = new Vue({
    el: "#app",
    data: {
        username: "张三",
        info: {
            age: "18"
        }
    },
    watch: {
        // 方法格式监听器
        // 监听的函数名就是需要监听的字段名（设置成相同名字）
        username(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        // 
        "info.age"(newVal, oldVal) {
            console.log(newVal, oldVal)
        }
    }
});

属性监听器

优点

1. 通过设置immediate: true，让监听器初始化加载时就触发。
2. 通过设置deep: true，让监听器监听对象中每个属性的变化。

使用

属性监听器的固定写法是watch中增加与被监听属性相同名字的属性，且在内部定义handler方法（固定handler名字）。

immediate、deep属性默认为false。

const vm = new Vue({
    el: "#app",
    data: {
        address: "地址",
        info: {
            gender: "男"
        }
    },
    watch: {
        // 对象格式监听器，可以设置一加载页面就触发一次（设置`immediate`为`true`）。
        address: {
            handler(newVal, oldVal) {
                console.log("handler#",newVal, oldVal)
            },
            // 默认 false
            immediate: true
        },
        info: {
            handler(newVal, oldVal) {
                console.log("handler2#",newVal, oldVal)
            },
            // 默认 false
            deep: true
        }
    }
});

完整代码

<div id="app">

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

    <br>

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

    <br>

    <input type="text" v-model="info.gender">

    <br>

    <input type="text" v-model="info.age">

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username: "张三",
            address: "地址",
            info: {
                gender: "男",
                age: "18"
            }
        },
        watch: {
            // 方法格式监听器
            // 监听的函数名就是需要监听的字段名（设置成相同名字）
            username(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            // 对象格式监听器，可以设置一加载页面就触发一次（设置`immediate`为`true`）。
            address: {
                handler(newVal, oldVal) {
                    console.log("handler#",newVal, oldVal)
                },
                // 默认 false
                immediate: true
            },
            info: {
                handler(newVal, oldVal) {
                    console.log("handler2#",newVal, oldVal)
                },
                // 默认 false
                deep: true
            },
            "info.age"(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        }
    });
</script>