Vue.js 计算属性

        模板内的表达式经常使用于简单的运算，当其过长或逻辑复杂时，会难以维护，而计算属性就是用于解决该问题的。

1、什么是计算属性

        在一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。可是表达式若是过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，好比：

<div>
        {{ text.split(',').reverse().join(',') }}
    </div>

        上面的表达式包含 3 个操做，并非很清晰，因此在遇到复杂的逻辑时应该使用计算属性。上例能够用计算属性进行改写：

<div>
        {{ reversedText }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                text: '123,456'
            },
            computed: {
                reversedText: function () {
                    // 这里的 this 指向的是当前的 Vue 实例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        全部的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

2、计算属性用法

        在一个计算属性里能够完成各类复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就能够。除了上述简单的用法，计算属性还能够依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会从新执行，视图也会更新。以在购物车内两个包裹的物品总价威力展现：

        

<div id="app">
        结算商品总价：{{ prices }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                package1: [
                    {
                        name: 'iPhoneX',
                        price: 18999,
                        count: 2
                    },
                    {
                        name: 'iPad',
                        price: 6666,
                        count: 1
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 3,
                        count: 5
                    },
                    {
                        name: 'banana',
                        price: 2,
                        count: 10
                    }
                ]
            },
            computed: {
                prices: function () {
                    var prices = 0;
                    for (var i = 0; i < this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1[i].count;
                    }
                    for (var i = 0; i < this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2[i].count;
                    }
                    return prices;
                }
            }
        })
    </script>

        当 package1 或 package2 中的商品有任何变化，好比购买数量变化或增删商品时，计算属性 prices 就会自动更新，视图的总价也会自动变化。

        每个计算属性都包含一个 getter 和 setter，上面的两个示例都是计算属性的默认用法，只是利用了 getter 来读取。在你须要时，也能够提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操做。例如：

        

<div id="app">
        姓名：{{ fullName }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                firstName: 'Mark',
                lastName: 'Green'
            },
            computed: {
                fullName: {
                    // getter 用于读取
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // setter 写入时触发
                    set: function () {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    }
                }
            }
        });
    </script>

        当执行 app.fullName = 'Constantine Lee'；时，setter 就会调用，数据 firstName 和 lastName 都会相对更新，视图一样也会更新。

        绝大多数状况下，只会用默认的 getter 方法来读取一个计算属性，实际业务中不多用到 setter ，因此在声明一个计算属性时，能够直接使用默认的写法，没必要将 getter 和 setter 都声明。

        计算属性除了上述简单的文本插值外，还常常用于动态地设置元素的样式名称 class 和内置样式 style 。当使用组件时，计算属性也常常用来动态传递 props 。

        计算属性还有两个很实用的小鸡技巧：1）计算属性能够依赖其余计算属性；2）计算属性不只能够依赖当前 Vue 实例的数据，还能够依赖其余实例的数据，例如：

<div id="app1">

    </div>
    <div id="app2">
        {{ reversedText }}
    </div>
    <script>
        var app1 = new Vue ({
            el: '#app1',
            data: {
                text: '123,456'
            }
        });

        var app2 = new Vue ({
            el: '#app2',
            computed: {
                reversedText: function () {
                    // 这里实例 app1 的数据 text
                    return app1.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        这里建立的两个 Vue 实例 app1 和 app2 ，在 app2 的计算属性 reversedText 中，依赖的是 app1 的数据 text ，因此当 text 变化时，实例 app2 的计算属性也会变化。这样的用法在组件和组件化里会用到，尤为是在多人协同开发时很常见，由于你写的一个组件所用到的数据须要依赖他人的组件提供。

3、计算属性缓存

        上述的示例代码，调用 methods 里的方法也能够与计算属性起到一样的做用，好比用 methods 改写为：

<div id="app">
        <!-- 注意：这里的 reversedText 是方法，因此要带 () -->
        {{ reversedText() }}
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                text: '123,456'
            },
            methods: {
                reversedText: function () {
                    // 这里的 this 指向的是当前 Vue 实例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还能够接受参数，使用起来更灵活。既然使用 methods 就能够实现，那么为何还须要计算属性呢？缘由就是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会从新取值，因此 text 只要不改变，计算属性也就不更新。例如：

computed: {
            now: function () {
                return Date.now();
            }
        }

        这里的 Data.now() 不是响应式依赖，因此计算属性 now 不会更新。可是 methods 则不一样，只要从新渲染，它就会被调用，所以函数也会被执行。

        使用计算属性仍是 methods 取决于你是否须要缓存，当遍历大数组和作大量计算时，应当使用计算属性，除非不但愿获得缓存。