計算プロパティとリスナーの詳細

計算プロパティとリスナーの詳細

1. 計算されたプロパティ

テンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。

例えば:

<div id="例">
  {{ message.split('').reverse().join('') }}
</div>


この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは、変数messageの逆文字列を表示することであると気づくには、しばらくそれを見る必要があります。この反転された文字列をテンプレート内の複数の場所に含める必要がある場合、処理がさらに難しくなります。

したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。

1.1 基本的な例

<div id="例">
  <p>元のメッセージ: "{{ message }}"</p>
  <p>計算された逆メッセージ: "{{reversedMessage }}"</p>
</div>
var vm = 新しい Vue({
  el: '#例',
  データ: {
    メッセージ: 'こんにちは'
  },
  計算: {
    // 計算プロパティゲッター
    逆メッセージ: 関数 () {
      // `this` は vm インスタンスを参照します。 return this.message.split('').reverse().join('')
    }
  }
})


結果:

元のメッセージ: 「こんにちは」

計算された逆メッセージ: "olleH"

ここでは、計算プロパティreversedMessage宣言します。私たちが提供する関数はproperty vm.reversedMessagegetter関数として使用されます。

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'さようなら'
console.log(vm.reversedMessage) // => 'eybdooG'


ブラウザ コンソールを開いて、例のvm自分で変更することもできます。 vm.reversedMessageの値は常にvm.messageの値に依存します。

通常のpropertyバインドするのと同じように、テンプレート内で計算プロパティをバインドできます。 Vue はvm.reversedMessage vm.messageに依存していることを認識しているため、 vm.messageが変更されると、 vm.reversedMessageに依存するすべてのバインディングも更新されます。そして最も良い点は、この依存関係を宣言的な方法で作成したことです。計算プロパティのgetterは副作用がないため、テストと理解が容易になります。

1.2 計算プロパティキャッシュとメソッド

式の中でメソッドを呼び出すことで同じ効果が得られることに気づいたかもしれません。

<p>反転されたメッセージ: "{{reversedMessage() }}"</p>
// コンポーネントメソッド内: {
  逆メッセージ: 関数 () {
    this.message.split('').reverse().join('') を返します
  }
}


同じ関数を、計算プロパティではなくメソッドとして定義できます。どちらの方法でも最終結果はまったく同じになります。ただし、違いは、計算されたプロパティは、リアクティブな依存関係に基づいてキャッシュされることです。関連するリアクティブ依存関係が変更された場合にのみ再評価されます。つまり、 messageが変更されていない限り、 reversedMessage計算プロパティに複数回アクセスすると、関数を再度実行しなくても、以前に計算された結果がすぐに返されます。

これは、Date.now() がリアクティブ依存関係ではないため、次の計算プロパティが更新されなくなることも意味します。

計算: {
  今: 関数() {
    Date.now() を返す
  }
}


対照的に、メソッドを呼び出すと、再レンダリングがトリガーされるたびに関数が常に再度実行されます。

なぜキャッシュが必要なのでしょうか?巨大な配列を走査し、大量の計算を実行する必要がある、計算コストの高いプロパティAがあるとします。そうすると、 Aに依存する他の計算プロパティが存在する可能性があります。キャッシュがなければ、必然的にAgetter複数回実行してしまいます。キャッシュが必要ない場合は、代わりにメソッドを使用します。

1.3 計算プロパティと監視プロパティ

VueVueインスタンス上のデータの変更を監視して応答するための、より一般的な方法であるプロパティのリッスンを提供します。他のデータが変更されたときに変更する必要があるデータがある場合、特に以前にAngularJS使用したことがある場合は、 watchを悪用するのは簡単です。ただし、命令型のwatchコールバックの代わりに計算プロパティを使用する方がよい場合がよくあります。

次の例を考えてみましょう。

<div id="demo">{{ fullName }}</div>
var vm = 新しい Vue({
  el: '#demo',
  データ: {
    ファーストネーム: 'Foo',
    姓: 'バー',
    フルネーム: 'Foo Bar'
  },
  時計:
    firstName: 関数 (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: 関数 (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})


上記のコードは命令型で反復的です。これを計算プロパティのバージョンと比較します。

var vm = 新しい Vue({
  el: '#demo',
  データ: {
    ファーストネーム: 'Foo',
    姓: 'バー'
  },
  計算: {
    フルネーム: 関数 () {
      this.firstName + ' ' + this.lastName を返します
    }
  }
})

ずっと良くなりましたね。

1.4 計算プロパティセッター

計算プロパティにはデフォルトではゲッターしかありませんが、必要に応じてセッターを提供することもできます。

// ...
計算: {
  フルネーム:
    // ゲッター
    取得: 関数 () {
      this.firstName + ' ' + this.lastName を返します
    },
    // セッター
    設定: 関数 (newValue) {
      var names = newValue.split(' ')
      this.firstName = 名前[0]
      this.lastName = 名前[名前.長さ - 1]
    }
  }
}
// ...

これで、 vm.fullName = 'John Doe'を実行すると、 setterが呼び出され、それに応じてvm.firstNamevm.lastNameが更新されます。

2. リスナー

ほとんどの場合、計算プロパティの方が適切ですが、カスタム リスナーが必要な場合もあります。そのため、 Vuewatchオプションを通じてデータの変更に応答するより一般的な方法を提供します。このアプローチは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。

例えば:

<div id="watch-example">
  <p>
    はい/いいえで答えられる質問をします:
    <input v-model="質問">
  </p>
  <p>{{ 答え }}</p>
</div>
<!-- AJAX ライブラリと一般的なツールのエコシステムはすでに非常に充実しているため、Vue コアコードは繰り返されません -->
<!-- これらの機能は、簡素化するために提供されています。これにより、より使い慣れたツールを自由に選択できるようになります。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<スクリプト>
var watchExampleVM = 新しいVue({
  el: '#watch-example',
  データ: {
    質問: ''、
    答え: 「質問されるまでは答えることができません!」
  },
  時計:
    // `question` が変更された場合、この関数が実行されます question: function (newQuestion, oldQuestion) {
      this.answer = '入力が終わるのを待っています...'
      this.debouncedGetAnswer()
    }
  },
  作成: 関数 () {
    // `_.debounce` は、Lodash 経由の操作頻度を制限する関数です。
    // この例では、yesno.wtf/api へのアクセス頻度を制限します。// ユーザーが入力を完了するまで AJAX リクエストは行われません。 `_.debounce` 関数(およびその類似関数 `_.throttle`)の詳細については、
    // 詳細は以下を参照してください: https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  メソッド: {
    答えを得る: 関数() {
      if (this.question.indexOf('?') === -1) {
        this.answer = '質問には通常疑問符が含まれます。 ;-)'
        戻る
      }
      this.answer = '考え中...'
      var vm = これ
      axios.get('https://yesno.wtf/api')
        .then(関数 (応答) {
          vm.answer = _.capitalize(レスポンスデータ.answer)
        })
        .catch(関数 (エラー) {
          vm.answer = 'エラー! API にアクセスできませんでした。' + error
        })
    }
  }
})
</スクリプト>

結果:

はい/いいえの質問をします:

質問されるまでは答えることができません!

この例では、 watchオプションを使用すると、非同期操作 (API へのアクセス) を実行し、その操作の実行頻度を制限し、最終結果が得られる前に中間ステータスを設定できます。これらは計算プロパティでは実行できないことです。

計算プロパティとリスナーの詳細についての記事はこれで終わりです。計算プロパティとリスナーの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の計算プロパティとリスナーの使用の概要
  • Vue 学習ノート: 計算プロパティとリスナーの使用
  • Vue.js の計算プロパティとリスナーの簡単な分析
  • Vue の計算プロパティとメソッドとリスナーの違いの詳しい説明(面接テストのポイント)

<<:  Kubernetes ポッドオーケストレーションとライフサイクルの詳細な説明

>>:  txt ブックの内容を Web ページに表示するコード

推薦する

TCP 3 回目のハンドシェイク データ転送プロセス図

RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

OpenSSL を使用した Kubernetes 証明書の生成の概要

Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

VMware で Nginx+KeepAlived クラスタ デュアルアクティブ アーキテクチャを展開する際の問題と解決策

序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...

ZabbixはLinuxシステムサービスのプロセスを監視

Zabbix は Linux システムのサービス ユニットを監視するためのルールを自動的に検出します...

Mysql でサーバーの UUID を変更する方法

問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

Linux コマンドラインのワイルドカードとエスケープ文字の実装

ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...