持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

vue中计算属性

在我们使用vue的时候，会遇到这样一种情况：我们需要对一个数据进行处理，然后再显示出来，比如我们有一个数据a，我们需要对它进行处理，然后再显示出来，这个时候我们就可以使用计算属性。

使用计算属性的一大好处就是不用在插值语法中书写整个计算过程，使得代码更加简洁，可读性更好。

1.什么是计算属性

在最开始的时候，我们在插值语法中使用的是一个数据，但是随机业务逻辑的增加，我们需要对这个数据进行处理，然后再显示出来，这个时候我们就可以使用计算属性。

计算属性就是将一个或者多个已经存在的数据进行处理，然后再返回一个新的数据。

2.计算属性的使用

首先，我们要知道需要处理的数据是否在vue实例中，如果不在，那么我们就需要将它添加到vue实例中，然后再使用计算属性。
计算属性需要写在computed中，然后再写一个函数，函数的返回值就是我们需要的数据。

<p>{{sum}}</p>

var vm = new Vue({
    el: '#app',
    data: {
        a: 1,
        b: 2
    },
    computed: {
        sum: function () {
            return this.a + this.b;
        }
    }
});

上面的代码就是将a和b进行相加，然后再返回一个新的数据，在插值语法中，我们直接使用sum就可以得到a与b的和了。

3.计算属性的原理

计算属性的原理实际借助了JavaScript中Object.defineProperty()方法，这个方法可以给对象添加属性，然后可以对这个属性进行一些操作，比如设置它的可读性，可写性，可枚举性等等。

计算属性的完整写法应该要包含setter和getter。

    computed:{
        sum:{
            get:function(){
                return this.a+this.b;
            },
            set:function(newValueA,newVa lueB){
                this.a = newValue;
            }
        },
    }

上面的代码就是计算属性的完整写法，其中get是获取计算属性的值，set是设置计算属性的值。

3.1 getter函数执行的时机

getter函数执行的时机有两种：

当我们初次读取该计算属性的值的时候，会执行一次getter函数，然后将返回值缓存起来，以后再读取该计算属性的值的时候，就会直接返回缓存的值，不会再次执行getter函数。
当该计算属性所依赖的数据发生改变时，会再次执行getter函数，然后将返回值缓存起来。

4.计算属性的优势

其实我们不难发现，计算属性可以实现的功能，在方法中也可以得到实现。那为什么vue要设计一种计算属性呢？

这是因为有以下几点原因：

可以提高性能：
在methods中每次调用函数都会执行，而计算属性只有在依赖的数据发生变化的时候才会执行
可以提高代码的可读性:
不必再插值表达式中写复杂的逻辑代码，而是把复杂的逻辑代码放到计算属性中
可以提高代码的可维护性:
当逻辑代码发生变化的时候，只需要修改计算属性中的代码即可，不必再去修改插值表达式中的代码

5. 其余注意事项

计算属性是基于它的依赖进行缓存的，只有它的依赖发生改变时才会重新求值。这也意味着只要需要计算的属性值没有发生改变，多次访问该计算属性会立即返回之前的计算结果，而不必再次执行函数。
计算属性最终会出现在vue实例化对象上，我们直接去调用就可以了，并不需要在计算属性名的后面添加()。

vue基础之计算属性