序文ほとんどの場合、計算プロパティの方が適切ですが、カスタム リスナーが必要な場合もあります。そのため、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MYSQL データベース GTID はマスタースレーブレプリケーションを実現します (超便利)
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...
序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...
1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...
数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...
ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...
最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...
目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...
1. ページ要件1) 標準のヘッダーとフッターを使用するXML/HTML コードコンテンツをクリップ...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...
面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...