Vue 監視属性のグラフィック例の詳細な説明

Vue 監視属性のグラフィック例の詳細な説明

リスナープロパティとは何ですか?

🥰いわゆるモニタリングとは、組み込みオブジェクトのステータスやプロパティの変更を監視し、それに対応することです。プロパティのモニタリングとは、他のデータの変更を監視できることを意味します。

リスニングプロパティと計算プロパティの違いは何ですか?

計算されたプロパティはキャッシュされ、依存する値が変更されると結果が再計算され、DOM が更新されます。

プロパティはプロパティ値を監視し、定義された値が変化すると、対応する関数が実行されます。

使用方法の主な違い:

計算プロパティは非同期タスクを実行できません。計算プロパティは通常、サーバーを要求したり、非同期タスクを実行したりするために使用されません。これは、これには長い時間がかかる可能性があり、計算プロパティはリアルタイムで更新する必要があるためです。したがって、この非同期タスクは、listening プロパティを使用して実行できます。

一言で言えば、コンピュータでできることは時計でもでき、コンピュータでできないことは時計でもできる。

監視プロパティの使用

監視構成項目を使用して、監視するプロパティを構成項目に書き込みます。プロパティ値が変更されると、ハンドラー関数のコールバックがトリガーされます。計算されたプロパティの変更を監視することもできます。

例:

入力ボックスの変更を監視する

コード

<テンプレート>
<div class="main">
    私: <el-input v-model="name" placeholder="お名前を入力してください"></el-input>
    友達 1<el-input v-model="friends.friend_1" placeholder="名前を入力してください"></el-input>
    友達 2<el-input v-model="friends.friend_2" placeholder="名前を入力してください"></el-input>
</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ(){
    戻る {
      名前:「ロマンティック コーダー」
      friends:{friend_1:'张三',friend_2:'李四'}
    }
  },
  時計:{
    名前:{
      handler(newValue,oldValue){ //newValue 新しい値、oldValue 変更前の値 console.log(newValue,oldValue)
        this.friends.friend_1='王武'
      }
    },
    // マルチレベル構造 'friends.friend_1' 内の特定の属性の変更を監視します:{
      ハンドラー(新しい値、古い値){
        console.log(新しい値、古い値)
      }
    },
    '友達.友達_2':{
      ハンドラー(新しい値、古い値){
        console.log(新しい値、古い値)
      }
    },
  }
};
</スクリプト>

ディープモニタリング

オブジェクトが多層構造になっている場合、オブジェクトの多くのプロパティを監視する必要があり、各プロパティを個別に記述することを避ける必要があります。このとき、ディープ モニタリングが使用されます。

監視構成の監視プロパティ オブジェクトで deep を true に設定して、複数レベルのオブジェクトまたは配列内の値の変更を監視します。

 時計:{
    // マルチレベル構造内のすべての属性の変更を監視します friends:{
      ハンドラー(新しい値、古い値){
        console.log(新しい値、古い値、"aa")
      },
      deep:true, // ディープモニタリングを有効にする}
  }

注意:ここで問題があります。ディープモニタリングが発生すると、新しい値と古い値は同じになりますか?

理由:

公式説明:

オブジェクトまたは配列を変更する(置き換えるのではなく)場合、それらの参照は同じオブジェクト/配列を指しているため、古い値は新しい値と同一になります。 Vueは変更前の値のコピーを保持しません

これによりポインタが変更されます。私の記事「JS のディープコピー方法を知っていますか?」では、データストレージについて説明しました。

今すぐお電話ください

ディープ構成の場所と同じです。

現在のハンドラコールバックを直ちにトリガーするにはtrueに設定します

  時計:{
    名前:{
      handler(newValue,oldValue){ //newValue 新しい値、oldValue 変更前の値 console.log(newValue,oldValue)
        this.friends.friend_1='王武'
      },
      即時:true
    },
  }

ページが読み込まれたときに一度実行されるため、古いデータは未定義です。

最後に

ウォッチ リスニング プロパティは通常、データの永続化、イベントのディスパッチ、同期/非同期実行、フォーマットの検証などに使用されます。

Vue リスニング プロパティに関するこの記事はこれで終わりです。より関連性の高い Vue リスニング プロパティについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2 は属性の変更を監視します。サンプルコードをご覧ください。
  • Vue2.0 監視属性の使用と計算属性の使用の詳細な説明
  • Vue.js を使用して属性の変更を監視する
  • Vueの監視プロパティの詳細な説明

<<:  初心者向け入門チュートリアル④:サブディレクトリのバインド方法

>>:  CSSでサウンドを再生するいくつかのテクニック

推薦する

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...

Vueはページを更新するために3つの方法を使用する

プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...

MySQL データベースのバックアップとリカバリの実装コード

データベースのバックアップ #文法: # mysqldump -h server-u usernam...

jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...

CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

プロジェクト ページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキ...

React+Antdはテーブルの追加、削除、変更の例を実装します

目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

MySQL CHARとVARCHARの保存と読み取りの違い

導入保存時と読み取り時に CHAR 型と VARCHAR 型の違いを本当にご存知ですか?まずいくつか...