今天在学习Vue 2.0中的计算属性。发现@混元霹雳手 老师整理的一篇笔记《史上最详细 VUE2.0 全套 Demo 讲解 基础3（计算属性）》。看后感觉受益非浅。特意把自己根据老师的笔记一路学习下来。感兴趣的同学，也可以一起来玩。

Vue中的计算属性是所有属性的计算，而这些计算都是变向的在过滤值，通过数据的不断变化计算出来不同的值和操作不同的方法. 而在Vue中，会使用到计算属性的场景常见的有：

• 模板内的表达式
• 属性v-bind里可以进行的表达式
• 指令中可以进行的表达式

以上三者的主要优势是简洁。如果只是一个小操作，比如说一些简单的数值++，字符拼接，三元表达式，那么使用相当方便。当然，以上方式也有自己的劣势。一旦要处理的逻辑复杂，代码量就会变得大得多，而且难于维护。比如说用到if语句来控制流程。那么这个时候可能会想到用filter，那么filter场景适用于哪里，我们后面再聊，咱们先来看一个简单的示例。

<div id="app">
    <button @click="count++">{{count + '分'}}</button>
    <div>
        <input v-model="message" />
    </div>
    <p>{{ message.split(' ').reverse().join(' ') }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            count: 0,
            message: ''
        }
    }
})

效果如下：

从上面的示例中我们可以看出：

• 我们在模板内使用字符串拼接，{{count + '分'}}
• 通过v-bind指定绑定了一个click事件，它只做了一件事情，就是count++，button每点击一次，count值增加1，注意，这里并没有使用methods
• input通过v-model做了数据双向绑定，绑定了message，并且在p标签中对message字符串进行反转。

在p标签中对message进行计算转换的时候，是不是觉得语义不是很强烈，那么用什么办法更好呢？这就需要我们使用到前面提到的filter。

使用 filter

我们可以使用filter来修改前面的示例。事实下，在Vue中使用filter具有自己的优势，也具有自己的劣势：

• 优势：filter给我们用于计算和过滤一些模板表达式和v-bind属性表达式一些弊端的地方进行计算，他们会返回当前计算的值，可以进行传参在多地方共用这个过滤方法
• 劣势：如果我们要计算多个数据不同变化结合而成的地方，那么filter就比较难过滤到了，本质上filter就是一个一对一的行为，对单个数据进行过滤，可以进行传参，同方法，但不同参

把上面的示例，用filter修改之后就像下面这样：

<div id="app">
    <button @click="count++">{{count + '分'}}</button>
    <div>
        <input v-model="message" />
    </div>
    <p>{{ message | reverseString }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            count: 0,
            message: ''
        }
    },
    filters: {
        reverseString (value) {
            if (!value) return ''
            value = value.split('').reverse().join('')
            return value
        }
    }
})