监听器 watch

本文深入探讨了Vue.js中计算属性与监听器的使用技巧,包括函数与计算属性的区别,如何实现单向与双向数据绑定,以及watch选项的应用。通过具体示例,展示了如何利用这些特性进行高效的数据处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算;
通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性。

<body>
    <div id="app">
        数学:<input type="text" v-model="mathScore">
        英语:<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时,不要少了小括号 -->
        总得分(函数-单向绑定):<input type="text" v-model="sumScore()"><br>
        <!-- 绑定计算属性后面不加上小括号 -->
        总得分(计算属性-单向绑定):<input type="text" v-model="sumScore1"><br>
        总得分(计算属性-双向绑定):<input type="text" v-model="sumScore2">

        <!-- 通过 watch 选项 监听数学分数, 当数学更新后回调函数中重新计算总分sumScore3 -->
        总得分(监听器): <input type="text" v-model="sumScore3">   

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        /* 
        1. 函数没有缓存,每次都会被调用
        2. 计算属性有缓存 ,只有当计算属性体内的属性值被更改之后才会被调用,不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下:只有getter函数,而没有setter函数,所以只支持单向
            如果你要进行双向,则需要自定义setter函数
        */
        var vm = new Vue({
            el: '#app',
            data: {
                mathScore: 80,
                englishScore: 90,
                sumScore3: 0 // 通过监听器,计算出来的总得分
            },

            methods: {
                sumScore: function () { //100
                    console.log('sumScore函数被调用')
                    // this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算
                    return (this.mathScore-0) + (this.englishScore-0)
                }
            },

            computed: { //定义计算属性选项
                //这个是单向绑定,默认只有getter方法
                sumScore1: function () { //计算属性有缓存,如果计算属性体内的属性值没有发生改变,则不会重新计算,只有发生改变 的时候才会重新计算
                    console.log('sumScore1计算属性被调用')
                    return (this.mathScore-0) + (this.englishScore-0)
                },

                sumScore2: { //有了setter和getter之后就可以进行双向绑定
                    //获取数据
                    get: function() {
                        console.log('sumScore2.get被调用')
                        return (this.mathScore-0) + (this.englishScore-0)
                    },
                    //设置数据, 当 sumScore2 计算属性更新之后 ,则会调用set方法
                    set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值
                        console.log('sumScore2.set被调用')
                        var avgScore = newValue / 2
                        this.mathScore = avgScore
                        this.englishScore = avgScore
                    }
                }
            },
            
            //监听器,
            watch: {
                //需求:通过 watch 选项 监听数学分数, 当数学更新后回调函数中重新计算总分sumScore3
                mathScore: function(newValue, oldValue) {
                    console.log('watch监听器,监听到了数学分数已经更新')
                    //  newValue 是更新后的值,oldValue更新之前的值
                    this.sumScore3 = (newValue-0) + (this.englishScore-0)
                }
            },
        })

        //监听器方式2: 通过 vm 实例进行调用
        //第1个参数是被监听 的属性名, 第2个是回调函数 
        vm.$watch('englishScore', function(newValue) {
            //newValue就是更新之后的英语分数
            this.sumScore3 = (newValue-0) + (this.mathScore-0)
        })

        vm.$watch('sumScore3', function(newValue) {
            //newValue就是更新之后部分
            var avgScore = newValue / 2
            this.mathScore = avgScore
            this.englishScore = avgScore
        })
    </script>
</body>

ps:整理自梦学谷

### Vue3 中 `watch` 监听器的使用方法 #### 一、基本概念 在 Vue3 中,`watch` 是用于侦听响应式数据变化并执行相应操作的强大工具。当被监听的数据发生变化时,会触发回调函数来处理这些变化[^1]。 #### 二、不同类型的监听方式 ##### 方式1:监视 ref 定义的基本数据类型 对于通过 `ref()` 创建的基础数据类型变量,可以直接利用 `watch` 进行监控: ```javascript import { ref, watch } from 'vue'; const count = ref(0); watch(count, (newVal, oldVal) => { console.log(`count changed from ${oldVal} to ${newVal}`); }); ``` ##### 方式2:监视 ref 定义的对象类型 如果想要监听由 `ref()` 构建的对象内部属性的变化,则需设置深度监听模式: ```javascript import { ref, watch } from 'vue'; const obj = ref({ name: 'Alice', age: 25 }); // 开启深度监听 watch(obj, () => { console.log('obj has been modified'); }, { deep: true }); ``` ##### 方式3:监视 reactive 定义的对象类型数据 针对采用 `reactive()` 函数创建的对象结构,同样可以运用 `watch` 实现对其成员变量变动情况的关注: ```javascript import { reactive, watch } from 'vue'; const state = reactive({ message: '', }); watch(() => state.message, (newValue, oldValue) => { console.log(`message updated from "${oldValue}" to "${newValue}"`); }); ``` ##### 方式4:监视特定对象属性 有时仅关心某个具体字段而非整个对象的状态转变,此时可通过箭头函数指定目标路径完成精准捕捉: ```javascript import { reactive, watch } from 'vue'; const user = reactive({ profile: { firstName: 'John', lastName: 'Doe' } }); watch( () => user.profile.firstName, (newValue, oldValue) => { console.log(`firstName changed from ${oldValue} to ${newValue}`); } ); ``` 以上展示了四种常见的 `watch` 应用场景及其对应的实现代码片段[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值