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 オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

MySQL SHOW STATUSステートメントの使用

MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...

CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する

Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...

MySQL 単一テーブルクエリの例の詳細な説明

1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

JavaScript オブジェクトを作成する 3 つの方法

目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

Linux 上のカラフルな猫

Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...