vue3 watch と watchEffect の使い方と違い

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る

時計のご紹介

'vue' から { ref, reactive, watch, toRefs } をインポートします。

基本的なデータの種類を監視する-----監視機能:

1. ある程度の遅延性があります。ページが初めて表示されたときには実行されず、データが変更されたときのみ実行されます。

2.パラメータは現在値と元の値を取得できる

3. 複数のデータの変更を監視し、1 つのリスナーを使用してそれらを伝達できます。

設定() {
	定数名 = ref('leilei')
	ウォッチ(名前、(現在の値、前の値) => {
 	console.log(現在の値、前の値)
 })
}
テンプレート: `名前: <input v-model="name" />`

参照型を聴く-----

設定() {
	const nameObj = reactive({name: 'leilei', englishName: 'bob'})
 データを監視します watch(() => nameObj.name, (curVal, prevVal) => {
 	console.log(現在の値、前の値)
 })
 複数のデータを監視する watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', 前の名前, curEng)
  タイムアウトを設定する(() => {
   ストップ1()
  }, 5000)
 })
 const { name, englishName } = toRefs(nameObj)
}
テンプレート: `名前: <input v-model="name" /> 英語名: <input v-model="englishName" />`

2.ウォッチエフェクト

過剰なパラメータはなく、コールバック関数は1つだけ

1. 遅延なくすぐに実行し、ページが最初に読み込まれたときに実行されます。

2. 内部コードを自動的に検出し、コードに依存関係がある場合はそれを実行します。

3. 聞くコンテンツを渡す必要はありません。コードの依存関係を自動的に感知します。多くのパラメータを渡す必要はありません。コールバック関数を渡すだけです。

4. 以前のデータの値を取得することはできません。現在の値のみを取得できます。

5. ここでは、一部 = 非同期操作の方が適切でしょう

ウォッチエフェクト(() => {
	console.log(名前オブジェクト名) 
})

リスナーをキャンセルする方法は、ウォッチ リスナーをキャンセルする方法と同じです。

const stop = watchEffect(() => {
	console.log(名前オブジェクト名) 
 タイムアウトを設定する(() => {
 	停止()
 }, 5000)
})

const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', 前の名前, curEng)
  タイムアウトを設定する(() => {
   ストップ1()
  }, 5000)
 })

3番目のパラメータimmediate: trueを追加することで、ウォッチを遅延のない即時実行に変更することもできます。

 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', 前の名前, curEng)
  タイムアウトを設定する(() => {
   ストップ1()
  }, 5000)
 }, {
 	即時: 真
 })

上記は、vue3 watch と watchEffect の使い方と違いについての詳細な内容です。vue3 watch と watchEffect の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • VUE3 での watch と watchEffect の使い方の詳細な説明
  • Vue3 での watchEffect の使用に関する簡単な分析
  • vue3 の watch と watchEffect についてご存知ですか?
  • Vue3 における watchEffect の具体的な使用法についての簡単な説明
  • vue3 の watch と watchEffect の詳細な例

<<:  docker pullがリセットされる問題を解決する

>>:  Oracle10パーティションとMySQLパーティションの違いの詳細な説明

推薦する

nginx パニック問題の解決方法の詳細な説明

nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

ファイルが存在するかどうかを判断する JavaScript サンプルコード

1. ビジネスシナリオ最近はファイルのアップロードやダウンロードに関する開発をしています。ダウンロー...

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...

vue-amap のインストールと使用手順

以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

MySQL の group by と having の詳細な説明

GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...

HTML テーブルタグチュートリアル (17): テーブルタイトルの垂直配置属性 VALIGN

表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...

MySQLでページングクエリを実装する方法

SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....