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パーティションの違いの詳細な説明

推薦する

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

CentOS7.5 MySQLのインストールチュートリアル

1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

Dockerの高可用性構成の詳細な説明

Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...

JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

Web デザイン体験: 5 つの優れた Web デザイン コンセプトの完全分析 (画像)

他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

CentOS8 - bash: 文字化けとその解決方法

この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...