初识Vue(5)——计算属性

最新推荐文章于 2023-10-09 10:33:37 发布

源魔方

最新推荐文章于 2023-10-09 10:33:37 发布

阅读量278

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108654394

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

什么是计算属性？

在网页中可以直接通过插值语法显示一些data中的数据，但是在某些情况下，我们需要将data中的数据进行转化、运算后才能用来在页面中显示，这个时候我们就需要用计算属性：

示例一：在页面中展示data中英语和数学的平均成绩

<body>
<div id="app">
    <h1>平均成绩为：{{avg}}</h1>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            English:80,
            Math:90
        },
        computed: {
            avg(){
             return  (this.English+this.Math)/2;
            }
        }
    })
</script>

在使用计算属性的时候，直接当成普通属性使用(avg)不用加括号(avg())。

计算属性原理

计算属性的本质(对象里面有set和get方法去改写和返回)：

computed: {
            avg:{
                set: function () {

                },
                get:function (){
                    return  (this.English+this.Math)/2;
                }
            }
        }

computed本质里面是一个名叫avg的对象。对象里面的get方法是返回一个被转化、运算后的，存放在内存中，不会对data里面的原数据进行改动，是一个只读属性。对象里面的set方法是改写数据，一般不希望通过网页去改写data里面的数据，所以一般不用set方法只用get方法。所以就有了示例一中那样的简写方式。

计算属性的优势（和methods对比）

在示例一中不用计算属性，直接在methods中定义方法去使用：

<body>
<div id="app">
    <h1>平均成绩为：{{avg}}</h1>
    <h2>平均成绩为：{{getavg()}}</h2>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            English:80,
            Math:90
        },
        computed: {
            avg:{
                set: function () {

                },
                get:function (){
                    return  (this.English+this.Math)/2;
                }
            }
        },
        methods:{
            getavg(){
                return  (this.English+this.Math)/2;
            }
        }
    })
</script>

可以看出不管是计算属性还是methods得到的结果都一样。

在这里先做一个小的测试，分别使用计算属性和methods去重复执行5次，打印在控制台：

<body>
<div id="app">
    <h1>平均成绩为：{{avg}}</h1>
    <h1>平均成绩为：{{avg}}</h1>
    <h1>平均成绩为：{{avg}}</h1>
    <h1>平均成绩为：{{avg}}</h1>
    <h1>平均成绩为：{{avg}}</h1>
    <h2>平均成绩为：{{getavg()}}</h2>
    <h2>平均成绩为：{{getavg()}}</h2>
    <h2>平均成绩为：{{getavg()}}</h2>
    <h2>平均成绩为：{{getavg()}}</h2>
    <h2>平均成绩为：{{getavg()}}</h2>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            English:80,
            Math:90
        },
        computed: {
            avg(){
                console.log("computed");
                return  (this.English+this.Math)/2;
            }
        },
        methods:{
            getavg(){
                console.log("methods");
                return  (this.English+this.Math)/2;
            }
        }
    })
</script>

结果：
在这里插入图片描述
可以看到同样执行5次，计算属性只调用了一次，而methods中调用了5次相同的代码。

在vue内部是对计算属性做了一层缓存，他会把算出来的数据缓存下来，在调用时它会观察对比在内存中缓存的数据和计算的数据有没有区别，比如这个就没有区别，所以就不会重复执行。但是写在methods里，数据根本没有缓存的概念，所以每次都会重新计算，。这样就导致在如果需要重复大量计算时，计算属性比methods性能好很多。