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" 后 。。。

相关推荐
Zuckjet_1 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy3 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法5 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴5 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰5 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息5 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC6 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi