Vue基础(8)_监视属性、深度监视、监视的简写形式

news2025/5/12 0:14:24

监视属性(watch)：

1.当被监视的属性变化时，回调函数(handler)自动调用，进行相关操作。
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

handler
在Vue中，handler方法是用于处理监听属性变化的函数。它通常与watch属性一起使用，用于监控数据的变化并执行相应的操作。handler方法可以帮助我们将处理逻辑抽象出来，以便复用和维护。
可传递参数：
newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值

immediate(布尔值)
immediate：立即的、马上的、立刻执行的。默认为 false。
作用：初始化时让handler先调用一下。

深度监视(deep)：
(1).Vue中的watch默认不监测对象内部值的改变。
(2).配置deep:true可以监测对象内部值改变(多层级结构监视)。

备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

监视的简写形式
前提条件：不需要immediate和deep属性，只需要handler时可简写。

watch:{
    isHot(){
        ....
    }
}

或者：

vm.$watch("isHot", function(){
    ...
})

举例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>天气案例</title>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx = "yyy" 中的 yyy 可以写一些简单的语句 -->
        <!-- 下面的语句可简写成： <button @click = isHot = !isHot;>改变天气</button> -->
        <button @click=changeWeacher>改变天气</button>
        <h2>a的值是：{{numbers.a}}</h2>
        <button @click="numbers.a++">点一次加1</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeacher() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            // 监视计算属性的变化（info）
            info: {
                // 初始化时让handler调用一下。immediate：立即的、马上的、立刻执行的。
                immediate: true,
                // handler什么时候调用？当info发生改变时。
                handler(newValue, oldValue) {
                    console.log("info被修改了, 新值为：" + newValue, "旧值：" + oldValue)
                }
            },
            // 监视多级结构中某个属性的变化（numbers.a）
            'numbers.a': {
                handler(newValue, oldValue) {
                    console.log("a的值改变了,新值为：" + newValue, "旧值：" + oldValue)
                }
            },

            // 监视多级结构中所有属性的变化（numbers.a、numbers.b等等）
            'numbers': {
                // 深度监视开启
                deep: true,
                handler() {
                    console.log("numbers对象里有的值改变了")
                }
            }
        }
    })
    // 正常写法
    vm.$watch('isHot', {
        // immediate: true,
        // deep:true,
        handler(newValue, oldValue) {
            console.log("监视isHot变化", "新值为：" + newValue, "旧值：" + oldValue)
        }
    })
    // 简写形式
    vm.$watch('isHot',
        function (newValue, oldValue) {
            console.log("【监视isHot值，代码简写】", "新值为：" + newValue, "旧值：" + oldValue)
        }
    )
    // 以上监视numbers.a的简写形式
    // 'numbers.a'(newValue, oldValue) {
    //     console.log("【监视a值代码简写】新值为：" + newValue, "旧值：" + oldValue)
    // },
</script>
</html>