Vue.js计算属性与监听器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45849112/article/details/108476211

本文深入探讨了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>