Vue3 のウォッチの使用方法とベストプラクティスガイド

Vue3 のウォッチの使用方法とベストプラクティスガイド

序文🌟

この記事では、Vue3 での watch のベストプラクティスを実験形式で紹介します。

この記事の主な目的は、応答性の高いデータを監視するときに現在の値と以前の値を取得する方法を学ぶことです。さて、まずはwatchの使い方を復習し、watchと連携して現在の値と過去の値を取得するために、refとreactiveを使ってレスポンシブなデータを定義する方法を紹介します。

1. APIの紹介

watch(WatcherSource, コールバック, [WatchOptions])

WatcherSource<T> = Ref<T> | (() => T) 型

インターフェース WatchOptions は WatchEffectOptions を拡張します {
    deep?: boolean // デフォルト: false
  即時?: ブール値 // デフォルト: false
  
}

パラメータの説明:

WatcherSource: 監視するリアクティブ変数を指定するために使用されます。 WatcherSource は ref レスポンシブ データを渡すことができ、リアクティブ レスポンシブ オブジェクトは関数の形式で記述する必要があります。

コールバック: 実行されるコールバック関数。現在の値 newValue と前の値 oldValue を入力パラメータとして順番に受け取ることができます。

WatchOptions: deep と Immediate をサポートします。レスポンシブなオブジェクトを詳細に監視する必要がある場合は、deep: true を設定します。デフォルトでは、watch は遅延します。immediate: true を設定すると、watch は初期化されるとすぐにコールバック関数を実行します。

さらに、vue3 のウォッチは複数の応答データのリスニングもサポートしており、ウォッチの監視を手動で停止することもできます。

2. 複数のデータソースの監視

<テンプレート>
  <div class="watch-test">
    <div>名前:{{name}}</div>
    <div>年齢:{{年齢}}</div>
  </div>
  <div>
    <button @click="changeName">名前の変更</button>
    <button @click="changeAge">年齢を変更</button>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, watch} をインポートします。

  エクスポートデフォルト{
    名前: 'ホーム'、
    設定() {

      const name = ref('小松楠奈')
      定数年齢 = ref(25)

      const watchFunc = watch([名前, 年齢], ([名前, 年齢], [前の名前, 前年齢]) => {
        console.log('新しい名前', 名前, '古い名前', 前の名前)
        console.log('newAge', age, 'oldAge', prevAge)
        (年齢>26)の場合
          watchFunc() // 監視を停止}
      },{即時:true})

      定数changeName = () => {
        name.value = '有村架純'
      }
      定数changeAge = () => {
        年齢.値 += 2
      }
      戻る {
        名前、
        年、
        名前の変更、
        年齢変更
      }
    }
  }
</スクリプト>

現象: 名前と年齢が変更されると、時計はデータの変更を監視します。 age が 26 を超えると監視を停止します。このとき age を変更すると、watch の停止により、watch のコールバック関数が無効になります。

結論: watch を使用して複数の値の変化を監視することも、watch 関数に名前を付けてから name() 関数を実行して監視を停止することもできます。

3. リスニングアレイ

<テンプレート>
  <div class="watch-test">
    <div>ref は配列を定義します: {{arrayRef}}</div>
    <div>リアクティブ定義配列: {{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">参照定義配列の最初の項目を変更します</button>
    <button @click="changeArrayReactive">リアクティブ定義配列の最初の項目を変更します</button>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, reactive, watch} をインポートします。

  エクスポートデフォルト{
    名前: 'WatchTest',
    設定() {
      定数配列Ref = ref([1, 2, 3, 4])
      定数配列Reactive = リアクティブ([1, 2, 3, 4])

      //参照が深くない
      const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefWatch', 新しい値, 'oldArrayRefWatch', 古い値)
      })

      //参照深度
      const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefDeepWatch', 新しい値, 'oldArrayRefDeepWatch', 古い値)
      }, {deep: true})

      // リアクティブ、ソースは関数ではありません const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', 新しい値, 'oldArrayReactiveWatch', 古い値)
      })

      // 配列監視のベストプラクティス - リアクティブとソースは関数的な方法で戻り、コピーされたデータを返します const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('newArrayReactiveFuncWatch', 新しい値, 'oldArrayReactiveFuncWatch', 古い値)
      })

      定数changeArrayRef = () => {
        配列参照値[0] = 6
      }
      定数changeArrayReactive = () => {
        配列Reactive[0] = 6
      }
      戻る {
        配列参照、
        アレイリアクティブ、
        配列参照の変更、
        配列リアクティブの変更
      }
    }
  }
</スクリプト>

現象: 配列が応答データ参照として定義されている場合、deep: true が追加されていないと、ウォッチは値の変更を監視できません。deep: true が追加されている場合は、ウォッチはデータの変更を検出できますが、古い値は新しい値と同じであり、古い値を取得できません。配列をレスポンシブオブジェクトとして定義すると、処理は行われず、watch はデータの変更を検出できますが、古い値は新しい値と同じになります。watch のデータソースを関数として記述し、スプレッド演算子を介して配列を複製して返すと、監視中に新しい値と古い値の両方を取得できます。

結論: 配列を定義するときは、データをレスポンシブ オブジェクトとして定義するのが最適です。このように、監視するときには、データ ソースを関数の形式で記述し、拡張演算子を介して配列の戻り値を複製するだけで、監視中に新しい値と古い値を取得できます。

4. 監視対象

<テンプレート>
  <div class="watch-test">
    <div>ユーザー:{</div>
      <div>名前:{{objReactive.user.name}}</div>
      <div>年齢:{{objReactive.user.age}}</div>
    <div> </div>
    <div>ブランド:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">年齢を変更</button>
    </div>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, reactive, watch} をインポートします。
  'lodash' から _ をインポートします。

  エクスポートデフォルト{
    名前: 'WatchTest',
    設定() {
      const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'})

      // リアクティブソースは関数です const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        コンソールログ('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      // リアクティブ、ソースは関数、deep: true
      const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => {
        コンソールログ('objReactiveDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      }, {deep: true})

      // オブジェクトのディープウォッチングのベストプラクティス - リアクティブとソースは関数的な方法で戻り、ディープコピーされたデータを返します const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        コンソールログ('objReactiveCloneDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      定数changeAge = () => {
        objReactive.user.age = 26
      }

      戻る {
        objReactive、
        年齢変更
      }
    }
  }
</スクリプト>

現象:オブジェクトをレスポンシブオブジェクトとして定義し、関数の形式で返す場合、deep: true を追加しないと、watch は値の変化を監視できません。deep: true を追加すると、watch はデータの変化を検出できますが、古い値は新しい値と同じであり、つまり、古い値を取得できません。watch のデータソースを関数の形式で記述し、ディープコピーを複製して (ここでは lodash ライブラリのディープコピーを使用) オブジェクトを返すと、監視中に新旧の値を取得できます。

結論: オブジェクトを定義するときは、データをレスポンシブオブジェクトとして定義するのが最適です。このように、監視するときには、データソースを関数の形式で記述し、ディープコピーを通じてオブジェクトを返すだけで済みます。監視中に新しい値と古い値を取得できます。

5. 結論

1. 通常、プリミティブ データ (数値、文字列など) を ref 応答データとして定義し、参照データ (配列、オブジェクト) を reactive 応答データとして定義します。

2. watch を使用してデータの変更を監視し、新しい値と古い値の両方を取得する必要がある場合は、データ ソースを関数として定義し、データ ソースのディープ コピーを返す必要があります。新しい値のみが必要な場合は、deep:true オプションを追加できます。
実は、参照型データをref形式で定義しても問題ありません。データソースを関数として定義し、データソースのディープコピーを返すだけで、新旧の値を取得できます~ハハハハハハハハハハハハハハハハ、でもベストプラクティスとしては、参照型をリアクティブデータとして定義することだと思います。

これで、Vue3 での watch の使用方法とベスト プラクティス ガイドに関するこの記事は終了です。Vue3 での watch の使用方法に関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 での watchEffect の使用に関する簡単な分析
  • vue WatchとComputedの使用の概要
  • Vue の computed と watch の違いを理解する方法
  • Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決
  • Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策
  • vue3 watch と watchEffect の使い方と違い
  • vue watch 監視オブジェクトのシンプルなメソッド例
  • Vueの監視方法のケースの詳細な説明

<<:  Linux または Windows 環境での pytorch のインストールと検証 (runtimeerror 問題の解決)

>>:  MySQL の遅いクエリの最適化方法と最適化の原則

推薦する

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

vitrualBox+ubuntu16.04 python3.6 最新チュートリアルと詳細な手順のインストール

最近ディープラーニングを学ぶためにUbuntu+Python 3.6バージョンを使う必要があるため、...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...

Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ

01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...

Raspberry Pi 4b ubuntu19 サーバーへの docker-ce のインストール手順

Raspberry Pi モデルは 4b、1G RAM です。システムはubuntu19.10サーバ...

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法

序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...

MySQL インデックスの詳細な説明

目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...

シンプルなドラッグ効果を実現するJavaScript

この記事では、ドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

mysql 8.0.15 winx64 解凍バージョン グラフィック インストール チュートリアル

システムをインストールした後、毎回いくつかのソフトウェアを再インストールする必要があります。ソフトウ...

HTML 基本ノート (推奨)

1. ウェブページの基本構造: XML/HTML コードコンテンツをクリップボードにコピー<...