Vue.js中方法和计算值的主要区别是什么?
在我看来，它们是一样的，是可以互换的。
当前回答
计算属性
计算属性也称为计算值。这意味着，它们可以随时更新和更改。此外，它还缓存数据，直到数据发生更改。在实例化Vue时，计算属性将转换为属性。
还有一件事我想分享，你不能在计算属性中传递任何参数，这就是为什么在调用任何计算机属性时不需要括号。
方法
方法与函数相同，以相同的方式工作。此外，除非调用方法，否则方法什么也不做。此外，像所有javascript函数一样，它接受参数，并且每次调用时都会重新计算。之后，它们就不能缓存值了
在方法中调用圆括号，你可以发送一个或多个参数。
其他回答
computed和methods之间的区别在于，当你在computed中定义一个函数时，它只在答案改变时才从头执行该函数，而methods在每次调用时都从头执行该函数。
偶然发现了同样的问题。对我来说，更清楚的是:
当Vue.js看到v-on指令后面跟着一个方法时，它确切地知道要调用哪个方法以及何时调用它。
<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button
<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */
当一个方法在没有v-on指令的情况下被调用时，它将在更新DOM的页面上触发一个事件时被调用(或者只是需要重新呈现页面的一部分)。即使该方法与被触发的事件没有任何关系。
<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The method `messageUppercase()` is called on every button click, mouse hover
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/
Computed属性仅在this词在其函数定义中引用的属性值发生更改时调用。
<p>Uppercase message: {{ messageUppercase }}</p>
data() {
return {
message: "I love Vue.js"
}
},
computed: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific
event changes the value of message. */
这里的要点是，在没有使用v-on指令调用方法的情况下使用computed属性是最佳实践。
@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.
Vue中的计算值和方法非常不同，在大多数情况下肯定是不可互换的。
计算属性
A more appropriate name for a computed value is a computed property. In fact, when the Vue is instantiated, computed properties are converted into a property of the Vue with a getter and sometimes a setter. Basically you can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. You don't call a computed and it doesn't accept any parameters. You reference a computed property just like you would a data property. Here's the classic example from the 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的文档非常好，而且易于访问。我推荐它。
计算属性
计算属性也称为计算值。这意味着，它们可以随时更新和更改。此外，它还缓存数据，直到数据发生更改。在实例化Vue时，计算属性将转换为属性。
还有一件事我想分享，你不能在计算属性中传递任何参数，这就是为什么在调用任何计算机属性时不需要括号。
方法
方法与函数相同，以相同的方式工作。此外，除非调用方法，否则方法什么也不做。此外，像所有javascript函数一样，它接受参数，并且每次调用时都会重新计算。之后，它们就不能缓存值了
在方法中调用圆括号，你可以发送一个或多个参数。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 如何从Vue数据传递一个值到href?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向，如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
