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 はマスタースレーブレプリケーションを実現します (超便利)

推薦する

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

LinuxベースのLVMシームレスディスク水平拡張の詳細な説明

環境名前財産CPU 5650 円メモリ4Gディスク20G+4TB この時点で、サーバーにはすでに次の...

Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図

MYSQL は、MYSQL サービスやその他のコンポーネントをインストールするためのインストーラ方式...

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法

VMware ツールは VMware の使用に非常に便利です。そのため、VMware ツールをインス...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

Web ページのスクロール バーが右側に設定されているのはなぜですか?

私たちが毎日使っているブラウザや Word 文書のスクロール バーはなぜ右側にあるのでしょうか。多く...

フロントエンドHTMLスキン変更機能の実装コード

透明を含む5つの肌の色を変更するには50行のコードが必要です最初にコードをお渡ししますので、ご自身で...

MySQL Binlog ログの読み取り時によくある 3 つのエラー

1. mysqlbinlog: [エラー] 不明な変数 'default-character...

vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...

Vue で Google サードパーティ ログインを実装するためのサンプル コード

目次1. 開発者プラットフォームの構成問題を解決する1. 開発者プラットフォームの構成1. 開発者プ...

MySQL で 1000 万件のレコードをすばやくクエリする方法

目次通常のページングクエリ最適化する方法大きなオフセット使用ID制限大量データ問題の最適化通常のペー...