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实例化对象上，我们直接去调用就可以了，并不需要在计算属性名的后面添加
()。
