Vue中的方法vs计算
Vue中方法和计算值之间的主要区别是什么。js？
它们看起来一样，可以互换。
共有3个答案
正如@gleenk要求一个实际的例子来说明方法和计算属性之间的缓存和依赖差异，我将展示一个简单的场景：
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
方法和计算描述看起来非常相似，但是@Abdullah Khan已经指定了它，它们不是一回事！现在，让我们尝试添加一些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;
}
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Methods - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Methods</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Vue中的计算值和方法非常不同，在大多数情况下绝对不能互换。
计算属性
计算值更合适的名称是计算属性。事实上，当Vue被实例化时，计算的属性被转换成带有getter和setter的Vue属性。基本上，您可以将计算值视为派生值，每当用于计算它的基础值之一更新时，它将自动更新。您不调用计算的，它不接受任何参数。引用计算属性就像引用数据属性一样。这是留档的经典例子：
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的文档非常好，而且易于访问。我推荐它。
-
本文向大家介绍JavaScript中的Shift()vs pop()方法？，包括了JavaScript中的Shift()vs pop()方法？的使用技巧和注意事项，需要的朋友参考一下 Shift()vs pop() Shift()和 pop()方法用于从数组中删除元素。但是它们之间略有差异。方法 shift()用于从数组中删除第一个元素，而pop()方法用于从数组中删除最后一个方法。让我们详细讨论
-
问题内容： Java类中的和方法之间有什么区别？ 问题答案： print（）格式化输出，而write（）仅打印给出的字符。print（）处理许多参数类型，使用String.valueOf（）将它们转换为可打印的字符串，而write（）仅处理单个字符，字符数组和字符串。 为了说明区别，write（int）将参数解释为要打印的单个字符，而print（int）则将整数转换为字符串。write（49）打印
-
本文向大家介绍vue中使用cropperjs的方法，包括了vue中使用cropperjs的方法的使用技巧和注意事项，需要的朋友参考一下 用vue的项目里需要对图片进行裁剪，于是使用了cropperjs，在使用的过程中也踩过一些坑，以下是在.vue文件里cropperjs的使用方法和经验教训总结： 在使用之前，先引入： 在项目里，运行： 在template里： js代码： 整体效果： css代码（比
-
本文向大家介绍vue系列之requireJs中引入vue-router的方法，包括了vue系列之requireJs中引入vue-router的方法的使用技巧和注意事项，需要的朋友参考一下 requireJs简介 参数配置 requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。 require define 其中define是用于定义模块，而require是用于载入模
-
本文向大家介绍关闭Vue计算属性自带的缓存功能方法，包括了关闭Vue计算属性自带的缓存功能方法的使用技巧和注意事项，需要的朋友参考一下 使用Vue的小伙伴都会知道，vue的计算属性。这个是这个样子解释的，当某些依赖值发生变化的时候，其自身的值也会发生变化，与之先关的DOM也会发生变化，通常呢，这个计算属性里面都会有两个方法：get和set可以使用。 这里我只分析一下，如何关闭计算属性的缓存，获取最
-
nuxt2，vue@2.7 如何 引入 vue-echarts6 是否只能通过原型方式调用？