Vue2的计算属性---computed

facker_Lap

于 2024-10-02 23:15:45 发布

阅读量805

点赞数 5

分类专栏：前端文章标签： javascript html5 css3 vue

本文链接：https://blog.csdn.net/wangtao_4/article/details/142686129

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

格式

简化格式
完整格式

作用

实现对表单等的总值计算

优势

计算结果会缓存，程序重复执行时直接调用结果
大大提高效率

一，简化格式：

computed:{
           函数名 () {
            .....
           }
        }，

二，完整格式：

computed:{
    函数名 () {
        get () {
            return XXX
        },
        set (value) {
            this.对象名=value.函数名等
        }
    }
}，

二，作用：
计算属性，顾名思义可以自动计算表单或其他的总值，如下以计算表单的总计为例，先看代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <table border="1px" color="black" width="300px" text-align="center">
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item,index) in list">
                <th>{{item.name}}</th>
                <th>{{item.num}}</th>
            </tr>
        </table>
        <p>总计：<strong>{{totalNumber}}</strong></p>
    </div>
</body>

<script>
    const add = new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,name:'操作系统',num:5},
                {id:2,name:'组成原理',num:3},
                {id:3,name:'软工导论',num:6}
            ]
        },

        //computed
        computed:{
            totalNumber () {
                
                let sum=this.list.reduce((num,item)=>num+item.num,0);
                return sum;
            }
        },

        
    })
</script>
</html>

在该代码中，可以计算出总数量为14，看看HTML页面的结果

我们改变代码块中的num值时，用户页面的总计值也会改变，当然，在用户页面按F12打开浏览器的开发者工具，在开发者工具中改变num的值，我们可以更直观的看到computed的作用
desc
三，优势：
computed在程序执行完成时会缓存运行结果，当我们在次执行相同的程序，但数据不变时，computed就会直接调用缓存的结果，而不会重复执行，代码快如下

<body>
    <div id="app">
        <table border="1px" color="black" width="300px" text-align="center">
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item,index) in list">
                <th>{{item.name}}</th>
                <th>{{item.num}}</th>
            </tr>
        </table>
        <p>总计：<strong>{{totalNumber}}</strong></p>

        //用于检测程序是否会多次执行
        <span>总计：{{totalNumber}}</span><br>
        <span>总计：{{totalNumber}}</span><br>
        <span>总计：{{totalNumber}}</span><br>
        <span>总计：{{totalNumber}}</span><br>
        <span>总计：{{totalNumber}}</span><br>
    </div>
</body>

<script>
    const add = new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,name:'操作系统',num:5},
                {id:2,name:'组成原理',num:3},
                {id:3,name:'软工导论',num:6}
            ]
        },

        //computed
        computed:{
            totalNumber () {

                console.log('computed 执行了！') //用于检测该程序执行了多少次

                let sum=this.list.reduce((num,item)=>num+item.num,0);
                return sum;
            }
        },

        
    })
</script>
</html>

在用户页面打开发者工具，在控制台我们会发现console.log(‘computed 执行了！’)只执行了一次，如果我们使用methods方法中函数，则会重复执行，从而证明了computed确实会缓存计算的结果，当我们在一些大规模的重复计算中，这无疑会大大提高效率，以下是使用computed属性与methods方法的一个对比 desc
值得注意的是，computed为属性，所以在{{ }}中使用它的类名时，不需要在最后加(),如{{totalNumber}}，但在使用methods方法中的函数时，则需要在{{ }}的最后加()，如{{totalNumber()}}；