Vueのwatch、computed、methodsの違いのまとめ

1 はじめに

Vueインスタンスを作成するときに、オプションオブジェクトを渡すことができます。

定数vm = 新しいVue({
  データ： {
    メッセージ: 'こんにちは'
  },
  計算: {},
  メソッド: {},
  時計： {}
})

このオプションオブジェクトでは、多くのオプション (または属性) を指定できます。データ関連のオプションには、 data 、 methods 、 computed 、 watchなどが含まれますが、これらに限定されません。

このうち、 methods 、 computed 、 watchいずれも関数を通じてデータを処理したり、データに応答したりできます。これら 3 つには違いがありますが、混同しやすいです。

2 基本的な使い方

scriptを使用してvue.jsを導入します。次のコードはすべて次のhtmlで実行されます。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>メソッド</title>
    <!-- vue.js をインポート -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </head>
  <本文>
    
  </本文>
  <スクリプト>
    
  </スクリプト>
</html>

2.1 方法

methodsオプションで定義された関数はメソッドと呼ばれます。Vue インスタンスVueプロセス中に、 methodsオブジェクト内のメソッドは Vue インスタンスにミックスされ、Vue インスタンスのメソッドになります。これらのメソッドはVueインスタンスを通じて直接アクセスできます。

<本文>
  <div id="例">
    <!-- 表示: a:1 -->
    <p>a:{{ プラス() }}</p> 
  </div>
</本文>
<スクリプト>
  定数vm = 新しいVue({
    el: "#例",
    データ： {
      : 0,
    },
    メソッド: {
      プラス: 関数 () {
        this.a + 1 を返します。
      },
    },
  });
  console.log(vm); // vm のコンソール出力を表示すると、メソッド plus: ƒ () があることがわかります。⚠️メソッドであることに注意してください。 console.log(vm.plus()); // vm インスタンスを介してメソッドに直接アクセスします。出力: 1
</スクリプト>

methods内の関数は、実行するためにアクティブに呼び出される必要があります。a の値は、ページ内の<p>a:{{plus()}}</a> a更新しません。

2.2 計算プロパティ

computedオプションで定義された関数は、計算プロパティと呼ばれます。Vue インスタンスVueプロセス中に、 computedオブジェクト内の計算プロパティは Vue インスタンスに混合され、Vue インスタンスと同じ名前のプロパティになります。

<本文>
  <div id="例">
    <!-- 表示: a:1 -->
    <p>a:{{ プラス }}</p>
  </div>
</本文>
<スクリプト>
  定数vm = 新しいVue({
    el: "#例",
    データ： {
      : 0,
    },
    計算: {
      プラス: 関数 () {
        this.a + 1 を返します。
      },
    },
  });
  console.log(vm); // // コンソールで vm 出力を確認すると、属性 plus:1 があることがわかります。⚠️これは属性であることに注意してください</script>

一見すると、 computedとmethods同じ機能を持っているように見えますが、実際この例では同じ効果があります。

実際、2 つの違いは、vm インスタンスとアクセスメソッドを印刷することで反映されています。

methods内の関数はvmのメソッドになります
計算後、 computed内の関数はvmの同名の属性となり、属性値は関数の計算結果、つまり戻り値となる。

さらに、メソッドとは異なり、計算プロパティは、依存するデータの変更に応じて応答的に更新されます。つまり、a が変更されると、 plusプロパティも更新されます。

2.3 リスナーを見る

watchオプションのキーと値のペアは、リスナーまたはリスニングプロパティ/リスニングプロパティと呼ばれます。キーは監視する式であり、値は対応するコールバック関数です（値は他の形式である場合もありますが、ここでは展開されません）。

Vueインスタンス化プロセス中に、監視する必要がある変数が記録され、これらの変数が変更されると、対応するコールバック関数が実行されます。

<本文>
  <div id="例">
    <!-- 表示: a:1 -->
    <p>a:{{ a }}</p>
  </div>
</本文>
<スクリプト>
  定数vm = 新しいVue({
    el: "#例",
    データ： {
      : 0,
    },
    時計：
      a: 関数() {
        console.log("a has changed"); // a の値が変更されたため、コールバック関数は console.log(this.a); を実行します。
      },
    },
  });
  vm.a = 1; // ここで a の値を手動で変更します</script>

3つの違い

3.1 メソッドと計算プロパティ

2.2 で述べた 2 つの違いに加えて、最も重要な違いは次のとおりです。

計算されたプロパティは、応答性の依存関係に基づいてキャッシュされます。つまり、評価関数は上記のテキストのaが変更された場合にのみ再トリガーされ、それ以外の場合は複数の呼び出しがキャッシュから評価されます。これは、コストのかかる計算で繰り返し計算を回避するのに非常に役立ちます。
メソッドは呼び出されると常に再実行される

次の表は、両者の違いをまとめたものです。

	方法	計算された
Vueがインスタンス化された後、vmインスタンスは何になるか	VMインスタンス上のメソッドになる	VMインスタンスのプロパティになる
依存データに基づいて応答的に更新できますか?	いいえ、メソッドを積極的に呼び出す必要があります	できる
キャッシュできますか？	いいえ、各呼び出しは再実行されます	はい、依存データは変更されず、値はキャッシュから取得されます。

3.2 計算プロパティとリスナー

最初で最も明らかな違いは、リスナーの命名方法が固定されていることです。聞きたい相手に同じ名前を付ける必要があります。メソッドと計算プロパティは任意の名前を付けることができます
第二に、リスナーはアクティブにアクセスできないが、他の2人はアクティブにアクセスできる。
計算プロパティとリスナーの使用例:

1つ以上のデータから値を計算する必要がある場合は、計算プロパティを使用します。

リスニングプロパティは主に、特定の値の変化を監視し、必要な論理処理を実行するために使用されます。また、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合は、リスニングプロパティがより便利です。具体的な例については、vueドキュメントのリスナーを参照してください。

Vue のwatch 、 computed 、 methodsの違いについての記事はこれで終わりです。Vue のwatch 、 computed 、 methods Vue違いについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: