方法vs在Vue中计算
Boo*_*ap4 141 javascript methods vue.js computed-properties vuejs2
Vue.js中方法和计算值之间的主要区别是什么？
它们看起来一样,可以互换.
Ber*_*ert 192
计算值和方法在Vue中是非常不同的,并且在大多数情况下绝对不可互换.
计算财产
计算值的更合适的名称是计算属性.事实上,当Vue被实例化时,计算属性将被转换为具有getter的Vue属性,有时也会被设置为setter.基本上,您可以将计算值视为派生值,只要更新用于计算它的其中一个基础值,它就会自动更新.您不调用计算机,它不接受任何参数.您可以像引用数据属性一样引用计算属性.这是文档中的经典示例:
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(whichCharacter))
}
}
Vue的文档非常好,易于访问.我推荐它.
- > 一个方法……只有在你明确调用它时才会被评估。不是根据这个视频：https://www.youtube.com/watch?v=O14qJr5sKXo (4认同)
- @CameronHudson 在视频的示例中，评估方法是因为它们在 *template* 中被显式引用。这是[一个演示差异的示例](https://codepen.io/Kradek/pen/PBqVrB?editors=1011)。请注意，仅当数据更改时才调用方法*如果*它们在模板中被显式引用。 (3认同)
- 如果用户有两个输入，例如从 c 到 f 的温度转换，反之亦然，其中两个输入都可以确定彼此的值。请参阅 http://albireo.ch/temperatureconverter/，两个输入无需按下转换按钮即可自动反应。哪一个最适合使用计算或方法？ (2认同)
- 使用*特定的*UI,输入之间的循环关系,我会使用方法.https://codepen.io/Kradek/pen/gROQeB?editors=1010 (2认同)
- @ Bootstrap4虽然,这里也有一个计算机,但它更复杂.https://codepen.io/Kradek/pen/gROQeB?editors=1010 (2认同)
Giu*_*ini 47
由于@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;
}
}
});
这里我们有2个方法和2个计算属性来执行相同的任务.方法addToAmethod&addToBmethod与所计算的属性addToAcomputed&addToBcomputed所有添加20(即,age值)对任一a或b.关于这些方法,每次对任何列出的属性执行操作时都会调用它们,即使某个特定方法的依赖关系没有更改也是如此.对于计算属性,仅在依赖关系发生变化时才执行代码; 例如,引用A或B的特定属性值之一将分别触发或触发.addToAcomputedaddToBcomputed
方法和计算描述看起来非常相似,但正如@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>解释的结果
当我点击"添加到A"按钮时,调用所有方法(参见上面的控制台日志屏幕结果),addToBmethod()也执行但我没有按"添加到B"按钮; 引用B的属性值没有改变.如果我们决定单击"添加到B"按钮,则会出现相同的行为,因为将再次调用这两个方法而不依赖于依赖项更改.根据这种情况,这是不好的做法,因为我们每次都在执行方法,即使依赖关系没有改变.这实际上是消耗资源的,因为没有用于未更改的属性值的缓存.
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>解释的结果
当我单击"添加到A"按钮时,只addToAcomputed调用计算属性,因为正如我们已经说过的那样,只有当依赖项发生了变化时才会执行计算属性.由于我没有按下"添加到B"按钮并且B的年龄属性值没有改变,因此没有理由调用并执行计算属性addToBcomputed.因此,在某种意义上,计算属性维护B属性的"相同的未更改"值,就像一种缓存一样.在这种情况下,这是一种良好的做法.
- @ user3529607但计算属性不接收参数. (4认同)
- 为什么按下1个按钮时会执行所有方法？是什么原因/逻辑？ (3认同)
- @ user3529607据我了解，安装或创建Vue实例时，方法可能会很有用。使用计算属性无法做到这一点。同样，我们必须返回计算属性的值。 (3认同)
- @Bsinn 这是一个好问题：原因是基本上 Vue 不知道根据更新的内容需要运行哪一种方法。这就是计算属性所做的操作，它们观察需要计算或重新计算的变量，并且只在需要时运行。 (2认同)
- 以及使用方法的原因是什么？看起来计算属性更好（假设我们正在谈论“获取”方法）... (2认同)
Die*_*ira 17
这是这个问题的细分。
何时使用方法
- 对 DOM 中发生的某些事件做出反应
- 在组件中发生某些事情时调用函数。
- 您可以从计算属性或观察者调用方法。
何时使用计算属性
- 您需要从现有数据源组合新数据
- 您在模板中使用了一个由一个或多个数据属性构建的变量
- 您希望将复杂的嵌套属性名称简化为更易读且易于使用的名称（但在原始属性更改时更新它）
- 您需要从模板中引用一个值。在这种情况下，创建计算属性是最好的选择，因为它是缓存的。
- 您需要监听多个数据属性的变化
计算与方法之间的差异之一。假设我们有一个将返回计数器值的函数。（counter只是变量）。让我们看看函数在计算和方法中的行为
已计算
第一次执行时，函数内部的代码将被执行，vuejs会将计数器值存储在缓存中（以加快访问速度）。但是，当我们再次调用该函数时，vuejs将不会再次执行该函数内部编写的代码。它首先检查是否对计数器进行了任何更改。如果进行了任何更改，则仅它将重新执行该函数内部的代码。如果未更改计数器，则vuejs将不会再次执行该功能。它只会从缓存中返回先前的结果。
方法
就像javascript中的常规方法一样。每当我们调用该方法时，它将始终在函数内部执行代码，而不管对计数器所做的更改如何。
无论代码中的更改如何，方法将始终重新执行代码。仅当其中一个依赖项的值发生更改时，计算的内容才会重新执行代码。否则，它将为我们提供缓存中的先前结果，而无需重新执行
计算属性
\n\n计算属性也称为计算值。这意味着它们会更新并且可以随时更改。此外，它还会缓存数据，直到数据发生更改。当 Vue 实例化时，计算属性将转换为属性。
\n\n我想分享的另一件事是，您无法在计算属性中传递任何参数，这就是为什么在调用任何计算机属性时不需要括号。
\n\n方法
\n\n方法与函数相同，工作方式也相同。此外，除非您调用方法，否则它不会执行任何操作。此外，与所有 javascript 函数一样，它接受参数，并且每次调用时都会重新计算\xe2\x80\x99。之后，他们可以\xe2\x80\x99t缓存值
\n\n在调用括号的方法中，您可以在其中发送一个或多个参数。
\n