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

监视属性(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时可简写。

javascript 复制代码
watch:{
    isHot(){
        ....
    }
}

或者:

javascript 复制代码
vm.$watch("isHot", function(){
    ...
})

举例:

html 复制代码
<!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>

点击 "改变天气" 后。。。

点击 "点一次加1" 后 。。。

相关推荐
qb24 分钟前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖25 分钟前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯26 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰27 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f28 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖28 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰32 分钟前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °36 分钟前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)39 分钟前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
良木林1 小时前
JS中正则表达式的运用
前端·javascript·正则表达式