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 のディープコピー方法を知っていますか?」では、データストレージについて説明しました。

今すぐお電話ください

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

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

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

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

ここに画像の説明を挿入