Vueのcomputed、methods、watchの使い方と違い

1.computed計算プロパティ
タイプ:{[key:string]:Function|{get:Function,set:Function}

計算プロパティのデフォルトはgetter

のみです.

計算属性は、Vueインスタンスに混入される.すべてのgetterとsetterのthisコンテキストは、自動的にVueインスタンスにバインドされます.

計算プロパティの結果は、依存する応答プロパティが変化しない限り、キャッシュされます.ただし、非応答属性などの依存がインスタンスのカテゴリ外にある場合、計算属性は更新されません.

2.methodsメソッド
タイプ:{[key:string]:Function}

methodsは、Vueインスタンスに混入される.これらのメソッドは、VMインスタンスから直接アクセスするか、命令式で使用できます.メソッドのthisはVueインスタンスに自動的にバインドされます.

3.watchリスニング属性
タイプ:{[key:string]:string|Function|Object|Array}

オブジェクトで、キーは観察する必要がある式であり、値は対応するコールバック関数である.コールバック関数で得られたパラメータは、新しい値と古い値です.値は、メソッド名またはオプションを含むオブジェクトであってもよい.Vueインスタンスは、インスタンス化時に$watch()を呼び出し、watchオブジェクトの各プロパティを巡ります.

3.1 vm.$watch( expOrFn, callback, [options] )

パラメータ:

{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
     - {boolean} deep
     - {boolean} immediate

戻り値:{Function}unwatch vm$watchは、トリガコールバック

を停止するためのキャンセル観察関数を返します.

使用法:Vueインスタンスの変化を観察する式または属性関数の計算.コールバック関数で得られたパラメータは、新しい値と古い値です.式は、監視のキーパスのみを受け入れます.より複雑な式では、関数で置き換えられます.

4.属性キャッシュvsメソッドvsリスニング属性の計算

計算プロパティ:それらの依存に基づいてキャッシュされます.相関依存が変化する場合にのみ、

が再評価されます.

メソッド:呼び出しメソッドは、再レンダリングがトリガーされるたびに関数を再実行します.

リスニングプロパティ:watchオプションを使用すると、非同期操作(APIにアクセス)を実行できます.この操作を実行する頻度を制限し、最終結果が得られる前に中間状態を設定します.これらは計算プロパティではできません.この方法は、データの変化時に非同期またはオーバーヘッドの大きい操作を実行する必要がある場合に最も有用である.