Vue的计算属性

通常我们会在模板中绑定表达式，模板是用来描述视图结构的。如果模板的表达式存在过多的逻辑，就会变得臃肿不堪，可维护和可读性就会较差，因此，为了简化逻辑，当某个属性值依赖于其他属性的值时，就可以使用计算属性

来看一个简单的计算属性的例子

<div id="example"><input type="text" v-model="a"/><input type="text" v-model="b"/><br>a={{ a }},b={{ b }},c={{ c }}</div>var vm=new Vue({el:"#example",data:{a:'a',b:'b'},computed:{c:{get:function(){return this.a+this.b},set:function(newVal){var names=newVal.splite('')this.a=names[0]this.b=names[1]}}}})

在这个例子中，我们在html中只需要插入a，b，c即可，而背后的计算过程交由computed：计算属性来解决，当a和b的值发生改变时，c的值也会改变，而当我们的c发生改变时，相对于的a和b的值也会发生改变

这样看来，计算属性的使用还是很舒服的，但是如果再计算属性方法中执行大量的耗时操作，就可以会带来一些性能问题，比如说：在计算属性getter中循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算

在早期的Vue中，只要读取相对于的计算属性，就要执行一遍getter，但是在现在的Vue中，只有计算属性依赖的属性值发生改变才会执行新的getter

这就要说到计算属性和方法的区别：计算属性的缓存，基于依赖进行的缓存。即，当程序所依赖的观察数据属性发生改变之后，才重新执行getter，否则有缓存可以节省性能

只是这样也有一个问题，只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter，但是有时候计算属性依赖实时的非观察数据属性（例如最新的时间），所以Vue提供了缓存开关（关键词：cache），当我们将cache设为false时，每次执行都要重新执行一遍getter