1. 計算されたプロパティテンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。 例えば: <div id="例"> {{ message.split('').reverse().join('') }} </div> この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは、変数 したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。 1.1 基本的な例<div id="例"> <p>元のメッセージ: "{{ message }}"</p> <p>計算された逆メッセージ: "{{reversedMessage }}"</p> </div> var vm = 新しい Vue({ el: '#例', データ: { メッセージ: 'こんにちは' }, 計算: { // 計算プロパティゲッター 逆メッセージ: 関数 () { // `this` は vm インスタンスを参照します。 return this.message.split('').reverse().join('') } } }) 結果:
ここでは、計算プロパティ console.log(vm.reversedMessage) // => 'olleH' vm.message = 'さようなら' console.log(vm.reversedMessage) // => 'eybdooG' ブラウザ コンソールを開いて、例の 通常の 1.2 計算プロパティキャッシュとメソッド式の中でメソッドを呼び出すことで同じ効果が得られることに気づいたかもしれません。 <p>反転されたメッセージ: "{{reversedMessage() }}"</p> // コンポーネントメソッド内: { 逆メッセージ: 関数 () { this.message.split('').reverse().join('') を返します } } 同じ関数を、計算プロパティではなくメソッドとして定義できます。どちらの方法でも最終結果はまったく同じになります。ただし、違いは、計算されたプロパティは、リアクティブな依存関係に基づいてキャッシュされることです。関連するリアクティブ依存関係が変更された場合にのみ再評価されます。つまり、 これは、Date.now() がリアクティブ依存関係ではないため、次の計算プロパティが更新されなくなることも意味します。 計算: { 今: 関数() { Date.now() を返す } } 対照的に、メソッドを呼び出すと、再レンダリングがトリガーされるたびに関数が常に再度実行されます。 なぜキャッシュが必要なのでしょうか?巨大な配列を走査し、大量の計算を実行する必要がある、計算コストの高いプロパティ 1.3 計算プロパティと監視プロパティ
次の例を考えてみましょう。 <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] } } } // ... これで、 2. リスナーほとんどの場合、計算プロパティの方が適切ですが、カスタム リスナーが必要な場合もあります。そのため、 例えば: <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 }) } } }) </スクリプト> 結果:
この例では、 計算プロパティとリスナーの詳細についての記事はこれで終わりです。計算プロパティとリスナーの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Kubernetes ポッドオーケストレーションとライフサイクルの詳細な説明
>>: txt ブックの内容を Web ページに表示するコード
RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...
序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...
Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...
序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...
Zabbix は Linux システムのサービス ユニットを監視するためのルールを自動的に検出します...
問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...
ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...