Vue.js中 computed 和 methods 的区别

官方文档中已经有对其的解释了，在这里把我的理解记录一下。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>// javascriptvar 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() 不是响应式依赖：// javascriptcomputed: { now: function () { return Date.now() }}now 的值将在Vue实例化时生成，并且不再改变。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。computed其他说明computed 和 methods 不可以重名Vue会把 methods 和 data 里的东西，全部代理到Vue生成的对象中，这会将computed中重名属性覆盖