computed属性
在模板中使用表达式是非常方便直接的，然而这只适用于简单的操作。在模板中放入太多的逻辑，会使模板过度膨胀和难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再简洁和如声明式直观。你必须仔细观察一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
这就是为什么对于所有复杂逻辑，你都应该使用 computed 属性(computed property)。
基础实例
<body>
<div id="example">
<p>初始message是："{{message}}"</p>
<p>计算后的翻转message是："{{reversedMessage}}"</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 一个computed属性的getter函数
reversedMessage: function () {
// 'this'执行vm实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
这里我们声明了一个 computed 属性 reversedMessage。然后为 vm.reversedMessage 属性提供一个函数，作为它的 getter 函数：
console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'
computed缓存vs method方法
可以在表达式中通过调用 method 方法的方式，也能够实现与 computed 属性相同的结果：
<body>
<div id="example">
<p>翻转message是："{{reverseMessage()}}"</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
这里不使用 computed 属性，而是在 methods 中定义一个相同的函数。对于最终结果，这两种方式确实恰好相同。然而，细微的差异之处在于，computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值(re-evaluate)。这就意味着，只要 message 没有发生变化，多次访问 computed 属性 reversedMessage，将会立刻返回之前计算过的结果，而不必每次都重新执行函数。
这也同样意味着，如下的 computed 属性永远不会更新，因为 Date.now() 不是一个响应式的依赖数据：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每当触发重新渲染(re-render)时，method 调用方式将总是再次执行函数。
为什么我们需要将依赖数据缓存起来？假设一种场景，我们有一个高性能开销(expensive)的 computed 属性 A，在 computed 属性的 getter 函数内部，需要遍历循环一个巨大数组，并进行大量计算。然后还有其他 computed 属性直接或间接依赖于 A。如果没有缓存，我们将不可避免地多次执行 A 的 getter 函数，这远多余实际需要执行的次数！然而在某些场景下，你可能不希望有缓存，请使用 method 方法替代。