リスナープロパティとは何ですか?🥰いわゆるモニタリングとは、組み込みオブジェクトのステータスやプロパティの変更を監視し、それに対応することです。プロパティのモニタリングとは、他のデータの変更を監視できることを意味します。 リスニングプロパティと計算プロパティの違いは何ですか?計算されたプロパティはキャッシュされ、依存する値が変更されると結果が再計算され、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 初心者向け入門チュートリアル④:サブディレクトリのバインド方法
コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...
MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...
Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...
1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...
目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...
1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...
目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...
Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...
<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...
目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...
目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...
Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...
私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...
この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...