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

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

1 はじめに

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

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

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

このうち、 methodscomputedwatchいずれも関数を通じてデータを処理したり、データに応答したりできます。これら 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>

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

実際、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 のwatchcomputedmethodsの違いについての記事はこれで終わりです。Vue のwatchcomputedmethods Vue違いについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue におけるメソッド、ウォッチ、計算の違い

<<:  Kubernetes YAMLファイルの使用

>>:  クロスブラウザ開発体験のまとめ(I)HTMLタグ

推薦する

HTML pre タグ内の自動改行

このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...

mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...

JavaScript 組み込みの日付と時刻の書式設定のサンプル コード

1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...

横スクロールウェブサイトデザインの概要

水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...

Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明

旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...

Nginxの現在の制限設定の詳細な説明

この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...

MySQL における大規模オブジェクトのマルチバージョン同時実行制御の詳細な説明

MySQL 8.0: InnoDB のラージ オブジェクトに対する MVCCこの記事では、MySQL...

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

css n番目から始まるすべての要素を取得する

具体的なコードは次のとおりです。 <div id="ボックス"> &...

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

開発者とオペレーターが注目すべき Linux デバッグ ツール [推奨]

システム パフォーマンスの専門家である Brendan D. Gregg 氏は、LinuxCon N...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...