526互联

Vue（十）：监视属性——watch

发布时间 2023-07-06 21:07:23作者: 谁知道水烫不烫

1.监视属性的基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>天气案例-监视属性</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>今天的天气{{weather}}</h1>
            <button @click="changeWeather">改变天气</button>
        </div>
    </body>
    <!-- 
        监视属性watch
            写法：
                1.写在vm实例内部的watch配置
                2.写在vm实例外部，vm.$watch
            作用：被监视的属性改变时，回调函数执行，进行相关操作
            注意：被监视的属性必须存在，计算属性也可以被监视
     -->
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            computed: {
                weather() {
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }   
            },
            //监视属性的第一种写法，写在实例内部
            watch: {
                isHot: {
                    //immediate默认为false，当设置为true时会在一开始就调用一次handler
                    immediate:true,
                    //handler在被监视的属性变化时调用
                    handler(newValue, oldValue) {
                        console.log("isHot变化了", oldValue, newValue)
                    }
                }
            }
        })

        //监视属性的第二种写法，写在vm实例外部，注意属性要加引号
        vm.$watch("weather", {
            handler(newValue, oldValue) {
                console.log("weather变化了", oldValue, newValue)
            }
        })
    </script>
</html>

2.深度监视

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>天气案例-深度监视</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>a的值为：{{numbers.a}}</h1>
            <button @click="numbers.a++">a加一</button>
        </div>
    </body>
    <!-- 
        深度监视
        1.作用：监视有多个层级的属性，当对象内部值发生改变时，handler被调用
        2.写法：watch中加一个配置项 deep:true
     -->
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                numbers: {
                    a: 1,
                    b: 1,
                    c: {
                        c1: 1,
                        c2: 1
                    }
                }
            },
            //监视a的变化
            watch: {
                "numbers.a": {
                    handler(newValue, oldValue) {
                        console.log("a变化了", oldValue, newValue)
                    }
                },
                //监视整个numbers的变化，numbers中任意属性发生改变，都会触发handler
                numbers : {
                    deep: true, //开启深度监视
                    handler(newValue, oldValue) {
                        console.log("numbers变化了", oldValue, newValue)
                    }
                }
            }

        })

    </script>
</html>

3.监视属性简写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>天气案例-监视属性简写</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>今天的天气{{weather}}</h1>
            <button @click="changeWeather">改变天气</button>
        </div>
    </body>
    <!-- 
        简写的前提是除了handler不需要其他的配置项
     -->
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            computed: {
                weather() {
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }   
            },

            watch: {
                isHot(newValue, oldValue) {
                    console.log("isHot变化了", oldValue, newValue)
                }
            }
        })

        vm.$watch("weather", function(newValue, oldValue) {
            console.log("weather变化了", oldValue, newValue)
        })
    </script>
</html>

 

（本文仅作个人学习记录用，如有纰漏敬请指正）