{{ message.split('').reverse().join('') }}

data () {
    return {
        results: [
            {
                name: 'English',
                marks: 70
            },
            {
                name: 'Math',
                marks: 80
            },
            {
                name: 'History',
                marks: 90
            }
        ]
    }
}

computed: {
    totalMarks: function () {
        let total = 0
        let me = this
        for (let i = 0; i < me.results.length; i++) {
            total += parseInt(me.results[i].marks)
        }
        return total
    }
}

    
        
        Marks for {{ subject.name }}: {{ subject.marks }}
    

效果如下：

计算属性 vs 方法

我们可以使用Vue中的method计算出学科的总分，最终得到的总数结果是相同的。

在上例的基础上，我们把computed区块中的totalMarks函数整体移到methods中。同时在模板中将{{ totalMarks }} 替换成 {{ totalMarks() }}。 你最终看到的结果是一样的，如下所示：

虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法，totalMarks()方法在每次页面渲染时都被执行一次（例如，使用每一个change）。

如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是results）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着只要results还没有发生改变，多次访问totalMarks计算属性会立即返回之前的计算结果，而不必再次执行函数。

上面两个示例也说明，在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
    now: function () {
        return Date.now()
    }
}

相比之下，每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性的 setter

计算属性默认只有getter，不过在需要时你也可以提供一个setter：

computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

效果如下：

你在输入框中输入一个fullName，然后点击set按钮，可以看到对应的效果。你现在再运行app.fullName="Airen liao"时，计算属性的setter会被调用，app.firstName和app.lastName也相应地会被更新。如下图所示：

观察者

虽然计算属性在大多数情况下更合适，但有时候也需要一个自定义的watcher。这是为什么Vue通过watch选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动：watch属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch。然而，通常更好的想法是使用计算属性而不是命令式的watch回调。比如下面的示例：

    {{ fullName }}