1 应用场景

Vue.js 的表达式如果因为逻辑复杂变得过长时，就会变得臃肿，以至于难以阅读和维护。

这里我们对一个以分号分隔的字符串做逆序处理，并修改分隔符为逗号的表达式。

html：

<div id="app">
    {{str.split(';').reverse().join(',')}}
</div>

js：

var app=new Vue({
    el:'#app',
    data:{
        str:'1;2;3'
    }
});

输出结果：

3,2,1

使用计算属性之后——

html：

<div id="app2">
    {{reversedStr}}
</div>

js：

var app2 = new Vue({
    el: '#app2',
    data: {
        str: '1;2;3'
    },
    computed: {
        reversedStr: function () {
            return this.str.split(';').reverse().join(',');
        }
    }
});

所有的计算属性都以函数的形式定义在 Vue 实例内的 computed 属性内，这些函数最终会返回计算后的结果 。

2 依赖多个数据

计算属性还可以依赖 data 属性内的多个数据，只要其中任一数据发生变化，计算属性就会重新执行，视图也会得到相应的更新。我们以购物车内两种的物品为例，说说如何通过计算属性来计算购买商品的总价：

html：

<div id="app">
    购买的商品：{{commodity1.name}} * {{commodity1.count}}、{{commodity2.name}} * {{commodity2.count}}，总价：{{totalPrice}}
</div>

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            commodity1: {
                name: 'Bose SoundSport Free 真无线蓝牙耳机',
                price: 1998,
                count: 1
            },
            commodity2: {
                name: 'Kindle paperwhite 电子书阅读器',
                price: 998,
                count: 2
            }
        },
        computed: {
            totalPrice: function () {
                return this.commodity1.price * this.commodity1.count + this.commodity2.price * this.commodity2.count;
            }
        }
    });
</script>

输出结果：

购买的商品：Bose SoundSport Free 真无线蓝牙耳机 * 1、Kindle paperwhite 电子书阅读器 * 2，总价：3994

当 commodity1 或 commodity2 中的商品有任何变化，比如购买数量变化或价格调整时，计算属性 totalPrice 就会自动更新。

3 get 与 set 函数

每一个计算属性都包含一个 getter 和 setter，之前的示例只是利用了 getter 来读取计算结果。在需要时，我们可以提供一个 setter 函数，当手动修改计算属性的值时，就会触发 setter 函数，可以在此函数中定义一些操作。例如：

html：

<div id="app2">
    商品总价：{{totalPrice}}
</div>

js：

var app2 = new Vue({
    el: '#app2',
    data: {
        price: 28,
        count: 3
    },
    computed: {
        totalPrice: {
            get: function () {//读取
                return this.price * this.count;
            },
            set: function (val) {//写入
                var array = val.split(',');
                this.price = array[0];
                this.count = array[1];
            }
        }
    }
});
app2.totalPrice = '30,3';

输出结果：

商品总价：90

绝大多数情况下，只会用默认的 getter 方法来读取计算属性的值，很少用到 setter ，所以在声明一个计算属性时，可以直接使用之前介绍的默认写法O(∩_∩)O~

4 依赖其它 Vue 实例

还可以依赖其它 Vue 实例中的数据或计算属性。

html：

<div id="app3">
    最终价格：{{actualPrice}}
</div>

js：

var app3 = new Vue({
    el: '#app3',
    data: {},
    computed: {
        actualPrice: function () {
            return app2.totalPrice * 0.8;
        }
    }
});

输出结果：

最终价格：72

注意：引用的 Vue 实例必须在调用之前就已经定义好。

5 缓存

之前的示例代码，调用 methods 里定义的方法也可以起到与计算属性相同的作用。

既然使用 methods 就可以实现，那么为什么还需要用到计算属性呢？原因就是计算属性是基于它的依赖做了缓存。一个计算属性所依赖的数据发生变化时，它才会重新取值。

我们先定义一个休眠函数：

/**
 * 休眠
 * @param n 休眠时间，单位为毫秒
 */
function sleep(n) {
    var start = new Date().getTime();
    while (true) {
        if (new Date().getTime() - start > n) {
            break;
        }
    }
}

因为 js 是单线程的， 所以我们这里使用 while(true) ｛｝，使得 whlie(){} 后面的程序被阻塞，从而实现休眠 。

js：

var app4 = new Vue({
    el: '#app4',
    data: {},
    computed: {
        now: function () {
            return Date.now();
        }
    }
});
console.log("app4.now:" + app4.now);
sleep(3000);
console.log("app4.now2:" + app4.now);

var app5 = new Vue({
    el: '#app5',
    data: {},
    methods: {
        now: function () {
            return Date.now();
        }
    }
});
console.log("app5.now:" + app5.now());
sleep(3000);
console.log("app5.now2:" + app5.now());

输出结果：

从结果中可以看出：计算属性 now 没有变化。但 methods 不同，只要重新调用，函数就会被执行。

当遍历大数组或做大量计算时，建议使用自带缓存功能的计算属性哦O(∩_∩)O~