Vue.js 中的 methods 和 computed 值之间的主要区别是什么？
它们看起来相同且可互换。
Vue 中的计算值和方法非常不同，并且在大多数情况下绝对不能互换。
计算属性
计算值更合适的名称是 computed property。事实上，当 Vue 被实例化时，计算属性会被转换为 Vue 的属性，其中包含一个 getter，有时还有一个 setter。基本上，您可以将计算值视为派生值，只要用于计算它的基础值之一被更新，它就会自动更新。您不调用计算并且它不接受任何参数。就像引用数据属性一样引用计算属性。以下是 documentation 中的经典示例：
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
在 DOM 中引用如下：
<p>Computed reversed message: "{{ reversedMessage }}"</p>
计算值对于处理 Vue 中存在的数据非常有价值。每当您想要过滤或转换数据时，通常都会为此目的使用计算值。
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
计算的值也被缓存以避免重复计算一个在没有更改时不需要重新计算的值（例如，它可能不在循环中）。
方法
方法只是绑定到 Vue 实例的函数。只有当您明确调用它时才会对其进行评估。像所有 javascript 函数一样，它接受参数并且每次调用时都会重新计算。方法在相同的情况下很有用，任何函数都很有用。
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichChar))
}
}
Vue 的 documentation 非常好并且易于访问。我推荐它。
正如@gleenk 要求提供一个实际示例来说明方法和计算属性之间的缓存和依赖关系差异，我将展示一个简单的场景：
应用程序.js
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
在这里，我们有 2 个方法和 2 个计算属性来执行相同的任务。方法addToAmethod & addToBmethod 和计算的属性 addToAcomputed & addToBcomputed 都将 +20（即 age 值）添加到 a 或 b。关于这些方法，它们都在每次对列出的属性中的任何执行操作时被调用，即使某个特定属性的依赖项方法没有改变。对于计算属性，仅当依赖项发生更改时才执行代码；例如，引用 A 或 B 的特定属性值之一将分别触发 addToAcomputed 或 addToBcomputed。
方法和计算描述看起来非常相似，但正如 @Abdullah Khan 已经specified，它们不是一回事！现在让我们尝试添加一些 html 来一起执行所有内容，看看有什么不同。
方法案例演示
new Vue({ el: '#vue-app', data: { a: 0, b: 0, age: 20 }, methods: { addToAmethod: function(){ console.log('addToAmethod'); return this。 a + this.age; }, addToBmethod: function(){ console.log('addToBmethod'); return this.b + this.age; } } });
年龄 + A = {{ addToAmethod() }}
年龄 + B = {{ addToBmethod() }}
解释结果
当我点击按钮“添加到A”时，所有方法都被调用（见上面的控制台日志屏幕结果），addToBmethod()也被执行但我没有按“添加到 B” 按钮；引用 B 的属性值没有改变。如果我们决定单击按钮“添加到 B”，也会出现相同的行为，因为这两个方法都将独立于依赖项更改而被调用。根据这种情况，这是不好的做法，因为我们每次都在执行方法，即使依赖项没有改变。这真的很消耗资源，因为没有缓存未更改的属性值。
https://i.stack.imgur.com/Fa8GT.png
计算属性案例演示
new Vue({ el: '#vue-app', data: { a: 0, b: 0, age: 20 }, computed: { addToAcomputed: function(){ console.log('addToAcomputed'); return this。 a + this.age; }, addToBcomputed: function(){ console.log('addToBcomputed'); return this.b + this.age; } } });
Age + B = {{ addToBcomputed }}