vue中watch的使用

stoiCasey

已于 2022-02-09 17:12:35 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript html5

于 2021-12-27 15:13:50 首次发布

本文链接：https://blog.csdn.net/weixin_42216094/article/details/122172700

版权

一、概述

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

二、使用

1、简单使用

<template>
    <div class="testWatch">
        <button @click="++num">++</button>
        <span>{{ num }}</span>
        <button @click="--num">--</button>
    </div>
</template>
<script>
    export default {
        data() {
            return: {
                num: 0
            }
        },
        watch: {
            num(newValue, oldValue) {
                console.log("新值newValue：" + newValue);
                console.log("旧值oldValue：", + oldValue);
            }
        }
    }
</script>

2、immediate 参数：立即触发

<template>
    <div class="testWatch">
        <button @click="++num">++</button>
        <span>{{ num }}</span>
        <button @click="--num">--</button>
    </div>
</template>
<script>
    export default {
        data() {
            return: {
                num: 0
            }
        },
        watch: {
            num: {
                // 立即处理，进入页面后自动调用handler函数
                immediate: true,
                handler(newValue, oldValue) {
                    console.log("新值newValue：" + newValue);
                    console.log("旧值oldValue：", + oldValue);
                }
            }
        }
    }
</script>

3、deep 参数：深度监听

<template>
    <div class="testWatch">
        <button @click="++num">++</button>
        <span>{{ form.num }}</span>
        <button @click="--num">--</button>
    </div>
</template>
<script>
    export default {
        data() {
            return: {
                form: {
                    num: 0
                },
            }
        },
        watch: {
            <!-- 方式一 -->
            form: {
                // 深度监听每一个属性值
                deep: true,
                immediate: true,
                handler(newValue, oldValue) {
                    console.log("新值newValue：" + newValue);
                    console.log("旧值oldValue：", + oldValue);
                }
            }
            <!-- 方式二 -->
            "form.num"(newValue, oldValue) {
                console.log("新值newValue：" + newValue);
                console.log("旧值oldValue：", + oldValue);
            }
        }
    }
</script>