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タグ

推薦する

外部ネットワークアクセスを許可するためのMysql5.6の設定手順の詳細を共有する

最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...

CentOS サーバーのセキュリティ構成戦略

最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...

HTML マウス CSS コントロール

一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...

キャンバスでPS消しゴムスクラッチカードの効果を実現するためのJSの使用方法の詳細な説明

目次効果のデモンストレーション:メインJSコード実装 <div class="box...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

Nginx 仮想ホストを構成する 3 つの方法 (ポートベース) の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...

Centos8で静的IPを設定する方法の詳細な説明

CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...

証明書を使用してリモート Docker サーバーに接続する方法

目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...

Linux で起動時にプログラムを自動的に実行させる最も簡単な方法

たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...

MySQL の char、varchar、text フィールド タイプの違い

MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...