リスナープロパティとは何ですか?🥰いわゆるモニタリングとは、組み込みオブジェクトのステータスやプロパティの変更を監視し、それに対応することです。プロパティのモニタリングとは、他のデータの変更を監視できることを意味します。 リスニングプロパティと計算プロパティの違いは何ですか?計算されたプロパティはキャッシュされ、依存する値が変更されると結果が再計算され、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 初心者向け入門チュートリアル④:サブディレクトリのバインド方法
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...
この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...
目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...
目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....
複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...
プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...
データベースのバックアップ #文法: # mysqldump -h server-u usernam...
この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...
位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...
1. まず、公式ウェブサイト https://www.python.org/downloads/so...
プロジェクト ページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキ...
目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
導入保存時と読み取り時に CHAR 型と VARCHAR 型の違いを本当にご存知ですか?まずいくつか...