计算属性

模板内使用计算属性是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

<!-- 复杂运算 -->
<div>{{message.split('').reverse().join('')}}</div>
<!-- 计算属性代替复杂运算 -->
<div>{{reverseMessage}}</div>
computed: {
    <!-- 计算属性的getter -->
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

Computed VS Methods

我们可以使用方法达到和计算属性同样的效果
区别在于计算属性具有缓存，只有当计算属性所依赖的属性发生改变时，才会重新去计算，而方法每次都会去重新计算结果。

<div>{{reverseMessage}}</div>
<div>{{_reverseMessage()}}</div>
computed: {
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
},
methods: {
    _reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

Watch VS Computed

• watch

<div>{{fullName}}</div>
data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: ""
}
watch: {
    firstName: function (val) {
        this.fullName = val + " " + this.lastName;
    },
    lastName: function (val) {
        this.fullName = this.firstName + " " + val;
    }
}

• computed

<div>{{fullName}}</div>
data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: ""
}
computed: {
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}

watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

计算属性的Setter

计算属性默认只有get，在需要的时候也可以设置set方法

fullName: {
    get: function () {
        return this.firstName + " " + this.lastName;
    },
    set: function (val) {
        this.firstName = val.split(' ')[0];
        this.lastName = val.split(' ')[1];
    }
}