計算値と計算方法はVueでは大きく異なり、ほとんどの場合、絶対に交換できません。
計算プロパティ
計算値のより適切な名前は、 計算プロパティ です。実際、Vueがインスタンス化されると、計算されたプロパティはゲッターと時々セッターを使ってVueのプロパティに変換されます。基本的に、計算値は、計算に使用された基本値の1つが更新されるたびに自動的に更新される派生値と考えることができます。あなたは計算されたを呼ばないで、そしてそれはどんなパラメータも受け入れません。データプロパティと同じように、計算プロパティを参照します。これが ドキュメントからの古典的な例です ：
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の ドキュメント は本当に良くて簡単にアクセスできます。私はそれをお勧めします。
@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はすべて、ageまたはaに+20（つまりbの値）を加算します。メソッドについては、bothと呼ばれるeveryに対してアクションが実行されるたびにanyリストされたプロパティのうち、1つの特定のメソッドに対する依存関係が変更されていなくても。計算プロパティの場合、コードは依存関係が変更されたときにのみ実行されます。たとえば、AまたはBを参照する特定のプロパティ値の1つは、それぞれaddToAcomputedまたはaddToBcomputedをトリガーします。
メソッドと計算された説明はかなり似ているように見えますが、@ 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>説明した結果
"Add to A" をクリックすると、すべてのメソッドが呼び出され（上記のコンソールログ画面の結果を参照）、addToBmethod()も実行されますが、 "Add to 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>説明した結果
"Add to A" ボタンをクリックすると、計算プロパティaddToAcomputedのみが呼び出されます。これは、既に説明したように、依存関係が変更された場合にのみ計算プロパティが実行されるためです。そして "Bに追加" を押さなかったので、Bのageプロパティの値は変わっていないので、計算プロパティaddToBcomputedを呼び出して実行する必要はありません。したがって、ある意味では、計算されたプロパティは一種のキャッシュのようにBプロパティの「同じ変更されない」値を維持しています。そして、このような状況では、これが考慮されます 良い習慣 。
docs から
計算されたプロパティはそれらの依存関係に基づいてキャッシュされます。計算プロパティは、依存関係の一部が変更されたときにのみ再評価されます。
データをキャッシュしたい場合はComputedプロパティを使用し、データをキャッシュしたくない場合は単純なMethodプロパティを使用します。
計算方法と方法の違いの1つ。カウンタ値を返す関数があるとします（counterは単なる変数です）。関数が計算されたメソッドとメソッドの両方でどのように動作するかを見てみましょう。
計算済み
最初の実行時には、関数内のコードが実行され、vuejsはカウンタ値をキャッシュに格納します（アクセスを速くするため）。しかし、関数vuejsを再度呼び出すと、その関数内に記述されたコードは再び実行されません。最初にカウンタに加えられた変更をチェックします。何らかの変更が行われた場合にのみ、その関数内にあるコードが再実行されます。カウンタに変更がない場合は、vuejsは再び機能を実行しません。単にキャッシュから前の結果を返すだけです。
方法
これは、JavaScriptの通常の方法とまったく同じです。このメソッドを呼び出すたびに、カウンタに対する変更に関係なく、常に関数内のコードが実行されます。
メソッドは、コードの変更に関係なく常にコードを再実行します。その場合、依存関係の値の1つが変更された場合にのみ、計算時にコードが再実行されます。それ以外の場合は、再実行せずにキャッシュから以前の結果が返されます
計算プロパティ
計算プロパティは計算値とも呼ばれます。つまり、それらは更新され、いつでも変更できます。また、データが変更されるまでデータをキャッシュします。 Vueがインスタンス化されると、計算プロパティはプロパティに変換されます。
もう1つ共有したいことは、計算プロパティにパラメータを渡すことができないためです。コンピュータプロパティを呼び出すときに括弧は不要です。
メソッド
メソッドは関数と同じであり、同じように機能します。その上、メソッドはあなたがそれを呼ばない限り何もしません。また、すべてのJavaScript関数と同様に、パラメータを受け入れ、呼び出されるたびに再評価されます。その後、値をキャッシュすることはできません
メソッド呼び出しの括弧はそこにあり、あなたはその中に一つ以上のパラメータを送ることができます。
これがこの質問の内訳です。
メソッドを使うとき
- DOMで発生しているイベントに対処する
- コンポーネントで何かが起こったときに関数を呼び出すこと。
- 計算プロパティまたはウォッチャーからメソッドを呼び出すことができます。
計算プロパティを使用する場合
- 既存のデータソースから新しいデータを作成する必要があります
- テンプレートで使用する変数が1つ以上のデータプロパティから構築されている。
- 複雑で入れ子になったプロパティ名を読みやすく、使いやすいものにしたい（ただし、元のプロパティが変更されたら更新してください）
- テンプレートから値を参照する必要があります。この場合、キャッシュされているので、計算プロパティを作成するのが最善です。
- 複数のデータプロパティの変更を監視する必要があります