官方文档中已经有对其的诠释了，在这里把我的明白纪录一下。

computed 的运用场景

• HTML模板中的庞杂逻辑表达式，为了防备逻辑太重致使不容易保护，都应当把相干逻辑放入盘算属性。

  • 比方这类

        <div id="root">
            <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
        </div>

在这个处所，模板不再是简朴的声明式逻辑。这里是想要显现变量 message 的翻转字符串，而这类包括庞杂逻辑处置惩罚的表达式，都应当运用盘算属性。

computed 和 methods 的区分

1. computed是属性挪用，而methods是函数挪用

这意味着在HTML的插值里

• computed定义的要领是以属性接见的情势来挪用，如 {{reversedMessageComputed}}
• methods定义的要领，则要加上 () 来挪用，如 {{reversedNameMethod()}} ，不然视图中会衬着出以下内容
• function () { [native code] }

2. computed带有缓存功用，而methods不是

这里我援用一下官方文档的申明

盘算属性是基于它们的依靠举行缓存的。只在相干依靠发作转变时它们才会从新求值。

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 盘算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

上面的例子中，缓存意味着只需 message 还没有发作转变，屡次接见 reversedMessageComputed 盘算属性会马上返回之前的盘算结果，而没必要再次实行函数。而 reversedNameMethod() 要领，每次挪用都邑从新实行函数。

但同时须要注重，这也一样意味着下面的盘算属性将不再更新，由于 Date.now() 不是相应式依靠：

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

now 的值将在Vue实例化时天生，而且不再转变。
相比之下，每当触发从新衬着时，挪用要领将总会再次实行函数。

computed其他申明

• computed 和 methods 不可以重名

  • Vue会把 methods 和 data 里的东西，悉数代理到Vue天生的对象中，这会将computed中重名属性掩盖