第4章 Vue计算属性

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

什么是计算属性
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

计算属性缓存
计算属性的特性的确很诱人，但是如果在计算属性方法中执行大量的耗时操作，则可能会带来一些性能问题。例如，在计算属性getter中循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算。

在Vue.js 0.12.8版本之前，只要读取相应的计算属性，对应的getter就会重新执行。而在Vue.js 0.12.8版本中，在这方面进行了优化，即只有计算属性依赖的属性值发生了改变才会重新执行getter。

这样也存在一个问题，就是只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter。但是有时候计算属性依赖实时的非观察数据属性。

var vm = new Vue({
  data：{
     welcome:'welcome to join didiFamily'
  }，
  computed：{
     example:function(){
     return Date.now() + this.welcome
     }
  }
})

我们需要每次访问example都取得最新的时间而不是缓存时间。从Vue.js 0.12.11 版本开始，默认提供了缓存开关，在计算属性对象中指出cache字段来控制是否开启缓存。var vm = new Vue({

  data:{
     welcome：'welcome to join didifamily'
  },
  computed:{
     example:{
        //关闭缓存，默认为true
       cache:false,
       get:function(){
           return Date.now() + this.welcome
      }
    }
  }
})

设置cache为false关闭缓存之后，每次直接访问vm.example时都会重新执行getter方法。

常见问题:

①计算属性getter不执行的场景
我们了解到，当计算属性依赖的数据属性发生改变时，计算属性的getter方法就会执行。但是有些情况下，虽然依赖数据属性发生了改变，但是计算属性的getter方法并不会执行。
当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。
②在v-repeat中使用计算属性
有时候从后端获得JSON数据集合后，我们需要对单条数据应用计算属性。在Vue.js 0.12之前的版本中，我们可以在v-repeat所在元素上使用v-vomponent指令。在Vue.js 0.12之后的版本中，废弃了v-component指令，所以我们需要自定义元素组件来实现在v-repeat中使用计算属性。