Vue watch 监听器

Vue About 2,622 words

监听器

监听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名字)。

immediatedeep属性默认为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>
Views: 1,175 · Posted: 2023-01-05

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh