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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: