第三章 计算属性

1、computed 计算属性：
模板内的表达式常用于简单的运算，但当表达式过长或者逻辑复杂时，我们可以把所有的有关运算的表达式以函数的形式写在 Vue 实例的 computed 选项里，并最终返回计算后的结果。

computed:{
    reversedText:function(){
        return this.text.split(',').reverse().join(',');
    }
}

2、每一个计算属性都包括了 getter 和 setter，而它的默认用法就是 getter，因为我们常用它来读取值，而 setter 在业务中很少用到，通常手动修改计算属性的值时才会触发 setter。

computed:{
    fullName:{
    //getter,用于读取
        get:function(){
              return this.firstName + ' ' + this.lastName;
        },
    //setter,写入时触发(控制台输入app.fullName='John Doe')
        set:function(newValue){
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1]
        }
    }
}

3、计算属性的用法：
简单的文本插值显示计算结果；
动态地设置元素的样式名称 class 和内联样式；
使用组件时，动态传递 props；

4、计算属性的两个技巧：
计算属性可以依赖其他计算属性；
计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其它实例的数据。

5、计算属性缓存：
有时候我们会发现在 methods 里定义一个方法也可以实现计算属性的效果，甚至该方法还可以接受参数，用起来更灵活，那么为什么还需要计算属性呢？计算属性是基于它的依赖数据缓存的，只有当它所依赖的数据发生变化时，它才会重新更新取值，而 methods 方法不同，只要重新渲染，它就会被调用，函数也就会重新执行一次，因此当遍历大数组和做最大计算时应当使用计算属性，除非你不希望得到缓存。