转自：https://blog.csdn.net/qq_42535651/article/details/103332942
1.computed是响应式的，methods并非响应式。
2.调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
3.computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
4.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的
在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同，比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两中方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。
还有一个不同点就是在于computed是以对象的属性方式存在的，在视图层直接调用就可以得到值，例如：
，而methods必须以函数形式调用，例如：
, 可见，computed直接以对象属性方式调用，而methods必须要函数执行才可以得到结果。
举例：https://blog.csdn.net/ly_yanbo/article/details/88664408
computed详解
computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。下面是一个简易的计算器，来实现乘法的操作
<body>
<div id="app">
长度：<input v-model="length" type="text" /><br /> 宽度：
<input v-model="width" type="text" /><br /> 面积：
<input v-model="areas" type="text" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
},
computed: {
areas: function() {
console.log('调用computed')
return this.length * this.width
}
}
})
</script>
</body>
当在长度文本框和宽度的文本框里输入值的时候，面积会自动给出。这里的 computed 的操作比较简单，返回值也比较好写。但当遇到比较麻烦的操作时，我们就需要返回自定义的返回值。
<body>
<div id="app">
总价:<input v-model="prices" type="text"/>
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iPhone 7',
price: 7199,
count: 2
},
{
name: 'iPad',
price: 2888,
count: 1
}
],
package2: [
{
name: 'apple',
price: 3,
count: 5
},
{
name: 'banana',
price: 2,
count: 10
}
]
},
computed: {
prices: function() {
var prices = 0
for (var i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price * this.package2[i].count;
}
for (var i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price * this.package2[i].count;
}
return prices
}
}
})
</script>
</body>
自定的 prices 的几个值要保持一致，而且不能与 data 重复，也不需要在 data 里声明。
computed和methods的区别
我们用 computed 属性和 methods 方法编写一个计算器的乘法与加法计算。
<body>
<div id="app">
长度：<input v-model="length" type="text" /><br /> 宽度：
<input v-model="width" type="text" /><br /> 面积：
<input v-model="areas" type="text" />
<button @click="add()">+</button><br /> 和的值为：
<input v-model="num" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
num: ''
},
computed: {
areas: function() {
console.log('调用computed')
let areas = 0
areas = this.length * this.width
return areas
/*console.log("computed被调用了")*/
}
},
methods: {
add: function() {
console.log('调用methods')
this.num = parseInt(this.length) + parseInt(this.width)
},
}
})
</script>
</body>
- 用 computed 属性方法编写的逻辑运算，在调用时直接将返回时 areas 视为一个变量值就可使用，无需进行函数调用。computed 具有缓存功能，在系统刚运行的时候调用一次。只有只有当计算结果发生变化才会被调用。比如，我们在长度框与宽度框更改值的时候每次更改 computed 都会被调用一次，很浪费资源。
- 用 methods 方法编写的逻辑运算，在调用时 add() 一定要加“()”，methods 里面写的多位方法，调用方法一定要有（）。methods方法页面刚加载时调用一次，以后只有被调用的时候才会被调用。我们在长度框和宽度框的值输入完以后，点击“+” methods 方法调用一次。这里很明显我们采用 methods 会更节省资源。
目前来看 computed 属性的优势还是没有体现出来，我们再举一个例子。
<body>
<div id="app">
{{ reversedText }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
computed: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>这个输出的结果就是 456,123
<body>
<div id="app">
{{ reversedText() }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
methods: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>输出的结果也是 456,123 但两者之间的差别就是在计算结果不发生改变的情况下，computed 的方法只被调用了一次，即便是多处多次调用，computed 也只被调用一次，这就是 computed 缓存的优势。那么在哪些情况下更适合使用 computed ？一般使用简单的表达式对内容进行简单的转换与使用过滤器对内容进行简单的转换用的比较多。