vue中的计算属性computed

最新推荐文章于 2023-06-30 21:48:31 发布

_MadD

最新推荐文章于 2023-06-30 21:48:31 发布

阅读量243

点赞数

分类专栏： # vue基础知识文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45849112/article/details/108470242

版权

vue基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

computed 选项定义计算属性。
计算属性类似于 methods 选项中定义的函数：
1>计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
2>函数每次都会执行函数体进行计算。

<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)
                },
            },
        })
    </script>
</body>

在这里插入图片描述

computed选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会更新总分，而修改总分不会更新数据和英语。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter。

<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
                    }
                }
            },
        })
    </script>
</body>

ps:整理自梦学谷

_MadD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的计算属性computed

computed 选项定义计算属性。计算属性类似于 methods 选项中定义的函数：1>计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。2>函数每次都会执行函数体进行计算。<body> <div id="app"> 数学：<input type="text" v-model="mathScore"> 英语：<input type="text" v-model="englishSco
复制链接

扫一扫