Vue.js の watch メソッドと computed メソッドの違いの詳細な例

序文

この記事では主に、Vueにおけるwatchとcomputerの違いと、その方法について簡単に説明します。

まずは、これらの違いについてお話しましょう。もちろん見た目も違いますよ～～～、

ハハハハ、冗談はもうやめて、本題に入りましょう。

導入

メソッド: オブジェクトにマウントされる関数。通常は Vue インスタンス自体または Vue コンポーネントです。

computer: プロパティはメソッドのように見えますが、そうではありません。Vue では通常、機能プロパティの変更を追跡するためにデータを使用します。計算プロパティを使用すると、データと同じように機能するプロパティを定義できますが、依存関係に基づいてカスタム ロジックを設定することもできます。計算されたプロパティをデータの別のビューとして考えることができます。

視聴: これらにより、Reactivity System を理解できます。 Vue ストアのプロパティを監視するためのフックをいくつか提供します。変更が発生するたびに何らかの機能を追加したり、特定の変更に応答したりしたい場合は、プロパティを監視して何らかのロジックを適用できます。つまり、観察者の名前は観察対象と一致している必要があります。

これらの数文だけでは、3 つの違いを説明することはできません。例を見てみましょう。

1. 作用機序

computed\watch:watch と computed は、Vue の依存関係追跡メカニズムに基づいています。どちらも、特定のデータ (依存データと呼ばれる) が変更されると、このデータに依存するすべての「関連」データが「自動的に」変更される、つまり、データの変更を実現するために関連する関数が自動的に呼び出される、という処理を試みます。

メソッド: メソッドは関数を定義するために使用されます。当然ですが、実行するには手動で呼び出す必要があります。 watch や computed とは異なり、事前定義された関数を「自動的に実行」しません。

[概要]: メソッドで定義された関数は積極的に呼び出す必要がありますが、watch および computed に関連する関数は、目的を達成するために自動的に呼び出されます。

2. 自然から

1. 関数はメソッド内で定義されており、明らかに「fuc()」のように呼び出す必要があります (関数が fuc であると仮定)。

2. computed は計算された属性であり、実際にはデータ オブジェクト内のデータ属性と同じ型です (使用法の観点から)

例えば：

計算:{
   fullName: 関数 () { return this.firstName + lastName }
} 

アクセスするときは、データにアクセスするときと同じように this.fullName を使用してアクセスします (関数として呼び出さないでください!!)

3. 監視: 監視メカニズム + イベントメカニズムに類似

例えば：

時計：
   firstName: 関数 (val) { this.fullName = val + this.lastName }
}

firstName の変更は、この特別な「イベント」をトリガーするための条件であり、firstName に対応する関数は、イベント発生後に実行されるメソッドと同等です。

3. 時計と計算の比較

時計	計算された
1つのデータが複数のデータに影響を与える	1つのデータが複数のデータの影響を受ける

ウォッチ計算1 つのデータが複数のデータに影響する1 つのデータが複数のデータに影響される

4. メソッドはデータロジックの関係を処理せず、呼び出し可能な関数のみを提供する

watch/computed と比較すると、メソッドはデータ ロジックの関係を処理せず、呼び出し可能な関数のみを提供します。

新しいVue({
  el: '#app',
  テンプレート: '<div><p>{{ say() }}</p></div>',
  メソッド: {
    言う: 関数() {
      「外国で元気にやっています」と返す
    }
  }
})

5. 機能的補完性の観点から方法、監視、計算の関係を見る

多くの場合、computed は、watch やメソッドを使用するときには処理できない状況、または適切に処理されない状況を処理するために使用されます。computed は、メソッド内での繰り返し計算を処理するために使用します。

1. メソッド内の関数は、単なる「正直者」の集まりです。別の親関数がそれを呼び出すと、その結果が同じになる可能性があり、不必要である場合でも、毎回「従順に」実行され、結果が返されます。

2. Computed は「陰謀を企む少年」です。これは、Vue が提供する依存関係追跡システムに基づいています。依存データが変更されない限り、computed は再計算しません。

6. 特定の状況下でのウォッチのコード冗長性の現象を処理し、コードを簡素化するためにcomputedを使用する

要約する

計算された

1. 計算プロパティの値はデフォルトでキャッシュされます。計算プロパティは、レスポンシブな依存関係に基づいてキャッシュされます。つまり、データで宣言されたデータに基づいて計算されます。
2. 属性が他の属性から計算される場合、この属性は他の属性に依存し、多対1または1対1であり、通常は計算値を使用します。
3. 計算プロパティの属性値が関数の場合、デフォルトで get メソッドが使用されます。関数の戻り値はプロパティの属性値です。計算プロパティには get メソッドと set メソッドがあり、データが変更されると set メソッドが呼び出されます。
4. 計算プロパティは依存関係に基づいてキャッシュされた計算であり、必要な場合にのみ更新されます。

時計

監視機能は 2 つのパラメータを受け取ります。最初のパラメータは最新の値、2 番目のパラメータは入力前の値です。

さて、vue.js の watch メソッドと computed メソッドの違いについての記事はこれで終わりです。vue の watch メソッドと computed メソッドの違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。