vue3.0 のウォッチ リスナーの例の詳細な説明

vue3.0 のウォッチ リスナーの例の詳細な説明

序文

ほとんどの場合、計算プロパティの方が適切ですが、カスタム リスナーが必要な場合もあります。そのため、Vue は、watch オプションを通じてデータの変更に応答するより一般的な方法を提供します。このアプローチは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。

リスナーと計算プロパティの違い

計算プロパティは非同期操作を実行できませんが、リスナーは非同期操作を実行できます。これは、計算プロパティのアップグレードされたバージョンに相当します。

vue3 で watch を使用するにはどうすればいいですか?

基本的な使い方

<テンプレート>
  <h1>リスナーページを見る</h1>
  <p>通常のリスニングデータ: {{ num }}</p>
  <button @click="butFn">クリック</button>
</テンプレート>

スクリプト

'vue' から { ref, watch } をインポートします
// 必要な Vue3 の新機能をインポートし、必要に応じて setup() を呼び出すことを忘れないでください {
 
    定数 num = ref(0)
    // watch (監視するデータ、コールバック関数)
    ウォッチ(num, (v1, v2) => {
      // v1 は変更後の新しい値です // v2 は変更前の値です console.log(v1, v2)
      // 要点: 通常の関数をリスニングすると、変更前と変更後の値を取得でき、リスニング対象のデータは応答性がある必要があります})
    
    // 単一マシンイベント const butFn = () => {
      数値++
    }
    
     戻り値: { butFn, num }
}

複数の応答データを聴く

    定数 num = ref(0)
    定数num2 = ref(20)
    
    ウォッチ([num, num2], (v1, v2) => {
      // 保存された結果は配列であり、返される結果も配列形式の結果です // v1 は最新の結果の配列です // v2 は古いデータの配列です console.log('v1', v1, 'v2', v2)
    // 要約: 更新前後の値を取得でき、リスニング結果も配列データの順序と一致します})

リアクティブで定義された応答データをリッスンする

	定数obj = リアクティブ({
      メッセージ: 「奇妙でかわいい」
    })
    
   ウォッチ(obj, () => {
      // 最新の値のみ取得できます console.log(obj.msg)
    })

要約: オブジェクトをリッスンすると、リスナーのコールバック関数の 2 つのパラメータは同じ結果になり、最新のオブジェクト データを示します。 このとき、リッスンしたオブジェクトを直接読み取ることもでき、取得された値も最新のものになります。

リアクティブによって定義されたレスポンシブデータのプロパティをリッスンする

	定数obj = リアクティブ({
      メッセージ: 「奇妙でかわいい」
    })
    
	ウォッチ(() => obj.msg,(v1, v2) => {
        // v1 は監視データの最新値です // v2 は監視データの元の値です console.log(v1, v2)
        // 要約: オブジェクトのプロパティを監視する場合は、矢印関数を使用する必要があります // 監視するデータが少ないほど、パフォーマンスが向上します}
    )

設定オプションの使用

   定数obj = リアクティブ({
      メッセージ: {
        情報: 'ooo'
      }
    })
   ウォッチ(() => obj.msg,(v1, v2) => {
        コンソールログ(v1、v2)
      },
      {
        // コンポーネントの最初のレンダリングはimmediate: trueをトリガーします。
        // ディープモニタリングをオンにすると、オブジェクト内のデータが変更された場合も監視されます // 監視対象のデータが比較的長い式の場合は、関数を使用する必要があります // ただし、関数形式で記述した後は、内部のデータを変更できないため、ディープオプション deep: true を追加する必要があります
      }
    )

要約する

vue3.0 のウォッチ リスナー例の詳細な説明については、これで終わりです。vue3.0 のウォッチ リスナーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2 と Vue3 でウォッチ リスナーを使用する方法
  • vueリスナーウォッチでこれを呼び出すときに未定義の問題を解決する
  • Vue 2.0 リスナーウォッチ属性コードの詳細な説明
  • Vue.js でのウォッチの使用例
  • Vueのウォッチリスナーの使い方を説明する記事

<<:  モバイルデバイス用のメタタグ設定の完全なリスト

>>:  MYSQL データベース GTID はマスタースレーブレプリケーションを実現します (超便利)

推薦する

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

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

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...

openlayers6のマップオーバーレイの詳細な説明

1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

Zabbix動的実行監視収集スクリプトの実装原理

Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...

空のパスがページのパフォーマンスに与える影響に対する解決策

数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...

携帯電話番号の真ん中の4桁を隠すMySQL SQL文の方法

最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...

MySQLが数十億のトラフィックをサポートする方法

目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

Web ベースの電子メール コンテンツの HTML フォーマット標準の概要

1. ページ要件1) 標準のヘッダーとフッターを使用するXML/HTML コードコンテンツをクリップ...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

MySQL に 1,000 万件のレコードを素早く挿入する方法

面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...