Vue.js中方法和计算值的主要区别是什么?
在我看来，它们是一样的，是可以互换的。
当前回答
在vue 3附带的vue组合API中，可以作为vue 2的插件使用，方法和计算属性是不同的语法:
例子:
计算:
它是一个默认接受getter回调作为参数的函数，并根据其他属性(如ref, reactive或store state)返回一个不可变的ref。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
return {count,doubleCount} //expose the properties to the template
}
}
方法
它们是纯javascript函数，在Vue和vanilla js中以相同的方式表现，它们暴露在模板中并用作事件处理程序，它们不应该用于渲染目的，这可能会导致一些问题，如无限渲染。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
function increment(){
ref.value++
}
return {count,doubleCount,increment} //expose the properties/functions to the template
}
}
区别在于:
计算:
它被计算为不可变属性，而不是函数 它观察另一个属性并基于该属性返回一个属性。 它不能带参数。 可以使用watch属性观看它
方法:
用于重构computed/watcher属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题，不应该在模板中调用它。
其他回答
@gleenk需要一个实际的例子来说明方法和计算属性之间的缓存和依赖关系的差异，我将展示一个简单的场景:
app.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;
}
}
});
Here we have 2 methods and 2 computed properties that perform the same task. The methods addToAmethod & addToBmethod and the computed properties addToAcomputed & addToBcomputed all add +20 (i.e. the age value) to either a or b. Regarding the methods, they are both called every time an action has been performed on any of the listed properties, even if the dependencies for one specific method have not changed. For the computed properties, the code is executed only when a dependency has changed; for example, one of the specific property values that refers to A or B will trigger addToAcomputed or addToBcomputed, respectively.
方法和计算描述看起来非常相似，但正如@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>
解释结果
When I click on the button "Add to A", all the methods are called (see the console log screen result above), the addToBmethod() is also executed but I didn't press the "Add to B" button; the property value that refers to B has not changed. The same behaviour comes if we decide to click the button "Add to B", because again both the methods will be called independently of dependency changes. According to this scenario this is bad practice because we are executing the methods every time, even when dependencies have not changed. This is really resource consuming because there is not a cache for property values that have not changed.
Computed属性案例演示
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; } } }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueJS Computed properties - 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>Computed Properties</h1> <button v-on:click="a++">Add to A</button> <button v-on:click="b++">Add to B</button> <p>Age + A = {{ addToAcomputed }}</p> <p>Age + B = {{ addToBcomputed }}</p> </div> </body> <script src="app.js"></script> </html>
解释结果
When I click on the button "Add to A", only the computed property addToAcomputed is called because, as we already said, the computed properties are executed only when a dependency has changed. And since I didn't press the button "Add to B" and the age property value for B has not changed, there is no reason to call and execute the computed property addToBcomputed. So, in a certain sense, the computed property is maintaining the "same unchanged" value for the B property like a kind of cache. And in this circumstance this is consider good practice.
以下是ve3文档所说的-查看一个例子:
对于最终结果，这两种方法确实完全相同。然而，不同之处在于计算属性是基于它们的响应性依赖项进行缓存的。计算属性只有在其响应性依赖项发生更改时才会重新计算。[…相比之下，方法调用将始终在重新呈现发生时运行该函数。
额外的链接
方法 计算属性
计算与方法的区别之一。假设我们有一个返回计数器值的函数。(counter只是变量)。让我们看看函数在计算和方法中的行为
计算
At first time of execution the code inside the function will be executed and vuejs will store the counter value in cache(for accessing faster). But when we are again calling the function vuejs will not again execute the code written inside of that function. It first checks any changes made to the counter or not. If any changes made then only it will re-execute the code which is inside that function. If there are no changes made to the counter vuejs will not again execute the function. It will simply return the previous result from the cache.
方法
这就像javascript中的一个普通方法。无论何时调用该方法，它都将始终执行函数内部的代码，而不管对计数器做了什么更改。
方法将始终重新执行代码，而不考虑代码中的更改。其中as computed将重新执行代码，然后只有当它的一个依赖项的值改变了。否则，它将在不重新执行的情况下，向我们提供之前缓存的结果
在vue 3附带的vue组合API中，可以作为vue 2的插件使用，方法和计算属性是不同的语法:
例子:
计算:
它是一个默认接受getter回调作为参数的函数，并根据其他属性(如ref, reactive或store state)返回一个不可变的ref。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
return {count,doubleCount} //expose the properties to the template
}
}
方法
它们是纯javascript函数，在Vue和vanilla js中以相同的方式表现，它们暴露在模板中并用作事件处理程序，它们不应该用于渲染目的，这可能会导致一些问题，如无限渲染。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
function increment(){
ref.value++
}
return {count,doubleCount,increment} //expose the properties/functions to the template
}
}
区别在于:
计算:
它被计算为不可变属性，而不是函数 它观察另一个属性并基于该属性返回一个属性。 它不能带参数。 可以使用watch属性观看它
方法:
用于重构computed/watcher属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题，不应该在模板中调用它。
计算属性
计算属性也称为计算值。这意味着，它们可以随时更新和更改。此外，它还缓存数据，直到数据发生更改。在实例化Vue时，计算属性将转换为属性。
还有一件事我想分享，你不能在计算属性中传递任何参数，这就是为什么在调用任何计算机属性时不需要括号。
方法
方法与函数相同，以相同的方式工作。此外，除非调用方法，否则方法什么也不做。此外，像所有javascript函数一样，它接受参数，并且每次调用时都会重新计算。之后，它们就不能缓存值了
在方法中调用圆括号，你可以发送一个或多个参数。
推荐文章
- src和dist文件夹的作用是什么?
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
- 将RGB转换为白色的RGBA
- 如何将“camelCase”转换为“Camel Case”?
- 我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
- 如何使用JavaScript重新加载ReCaptcha ?
- jQuery。由于转义了JSON中的单引号，parseJSON抛出“无效JSON”错误
- 在JavaScript关联数组中动态创建键
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
