计算属性的出现是为了解决模板内表达式太过复杂而变得难以维护的情况。

假设我们知道长和宽，要计算一个矩形的面积，如果没有计算属性，我们可能像下面这样处理：

<div id="app">
    <input type="text" v-model="width">
    <input type="text" v-model="height">
    <p>面积是{{area()}}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        width:0,
        height:0
    },
    methods: {
        area: function() {
            return this.width * this.height
        }
    },
})

如果多次使用area属性，就会多次调用area函数计算表达式this.width * this.height。若使用计算属性：

<div id="app">
    <input type="text" v-model="width">
    <input type="text" v-model="height">
    <p>面积是{{area}}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        width:0,
        height:0
    },
    computed:{
        area:function(){
            return this.width*this.height
        }
    }
})

使用computed会将值缓存，只在它的响应式依赖变化时才会重新计算。

计算属性默认是调用getter，我们也可以设置其setter。

<div id="app">
    <p>Base Count: {{ baseCount }}</p>
    <p>Current Count: {{ count }}</p>
    <button @click="incrementCount">Increment Count</button>
    <button @click="incrementBaseCount">Increment Base Count</button>
</div>

new Vue({
    el: '#app',
    data: {
        baseCount: 5
    },
    computed: {
        count: {
            // Getter function
            get: function () {
                return this.baseCount * 2;
            },
            // Setter function
            set: function (newCount) {
                this.baseCount = newCount / 2;
            }
        }
    },
    methods: {
        incrementCount: function () {
            this.count++; //触发count的setter更新baseCount
        },
        incrementBaseCount: function () {
            this.baseCount++; //触发count的getter更新count
        }
    }
});

侦听器watch和计算属性一样都会监听数据的变化，但是，对于要监听的属性，侦听器需要给它们每一个都单独设置响应函数，计算属性则只需按需设置，例如上面的例子使用侦听器的话：

<div id="app">
    <input type="text" v-model="width">
    <input type="text" v-model="height">
    <p>面积是{{area}}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        width:0,
        height:0,
        area:0
    },
    watch:{
        width:function(newVal){
            this.area = newVal * this.height
        },
        height:function(newVal){
            this.area = newVal * this.width
        }
    }
})

这样会显得重复冗余。

所以，计算属性适用于基于一种或多种属性计算出派生值的情况，例如计算面积、价格等，也适用于需要进行一些复杂的数据处理和转换；侦听器适用于监听属性的变化，然后执行一些异步操作（例如API调用）、更新其他属性或自定义逻辑（例如数据变化时的动态效果）。