1 つの記事で Vue3 の watchEffect について学び、その応用シナリオについて話します。

この記事では、Vue3 の watchEffect を理解し、その副作用を紹介し、何ができるかについて説明します。皆様のお役に立てれば幸いです。

watchEffect は、渡された関数を即座に実行しながら、依存関係を事後的に追跡し、依存関係が変更されたときに関数を再実行します。 (学習ビデオ共有: vue ビデオ チュートリアル)

言い換えると、watchEffect は、依存関係ソースと watch のコールバック関数をマージすることと同じです。 , このコールバック関数は、リアクティブな依存関係のいずれかが更新されると再実行されます。 watch とは異なり、watchEffect のコールバック関数はすぐに実行されます (つまり、{immediate: true })

この記事では、主にその方法について説明します。 副作用を明確にするコードをよりエレガントにする~

watchEffect の副作用

副作用とは (副作用##) #), 簡単に言うと、副作用とは、外部変数データや変数の変更、外部インターフェイスの呼び出しなど、特定の操作を実行することです。 watchEffect のコールバック関数は副作用関数です。依存関係の変更をリッスンした後で watchEffect を使用して特定の操作を実行するためです。

副作用関数が実行されると、必然的にシステムに何らかの影響が生じます。たとえば、タイマー

setInterval が副作用関数内で実行されるため、副作用。 Vue3watchEffect副作用をリッスンする関数は、クリーンアップが失敗したときにコールバックを登録する入力パラメーターとして onInvalidate 関数を受け取ることができます。この無効化コールバックは、次の状況が発生したときにトリガーされます。

副作用が再実行されようとしている (つまり、依存関係の値が変更される)
• リスナー停止しています (明示的な呼び出しによって返されます。値がリスニングを停止するか、コンポーネントがアンインストールされ、リスニング停止が暗黙的に呼び出されます)

• import { watchEffect, ref } from 'vue'
  
  const count = ref(0)
  watchEffect((onInvalidate) => {
    console.log(count.value)
    onInvalidate(() => {
      console.log('执行了onInvalidate')
    })
  })
  
  setTimeout(()=> {
    count.value++
  }, 1000)

上記のコードが出力される順序は次のとおりです:

0 -> Executed onInvalidate、最後に実行 -> 1

分析: 初期化中に、

count の値最初に 0 が出力され、その後タイマーにより count の値を 1 に更新します。このとき、副作用が再度実行されるため、 onInvalidate のコールバック関数がトリガーされ、executed onInvalidate# が出力されます。##、その後、副作用関数が実行され、 の値 1 が出力されます。カウント＃＃＃。

import { watchEffect, ref } from 'vue'

const count = ref(0)
const stop = watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  stop()
}, 1000)

上記のコード: stop

関数を表示してリスニングを停止すると、

onInvalidate コールバック関数もトリガーされます。同様に、watchEffect が配置されているコンポーネント が暗黙的に stop 関数を呼び出してリスニングを停止するため、onInvalidate のコールバックも同様に実行できます。トリガーされる機能。 watchEffect アプリケーション

watchEffect

の非遅延実行と、渡された

onInvalidate 関数を使用して、次のことができます。どうしたの？ シナリオ 1

: 通常、タイマーを定義するかイベントをリッスンしますが、それを

mounted ライフサイクル フック関数で定義または登録する必要があります。コンポーネントが破棄される 以前は、タイマーがクリアされるか、リスニング関数が beforeUnmount フック関数でクリアされました。このように、ロジックは 2 つのライフサイクルに分散されており、メンテナンスや読み取りには適していません。 watchEffect

を使用すると、作成ロジックと破棄ロジックがまとめられ、コードがよりエレガントで読みやすくなります~

// 定时器注册和销毁
watchEffect((onInvalidate) => {
  const timer = setInterval(()=> {
    // ...
  }, 1000)
  onInvalidate(() => clearInterval(timer))
})

const handleClick = () => {
 // ...
}
// dom的监听和取消监听
onMounted(()=>{
  watchEffect((onInvalidate) => {
    document.querySelector('.btn').addEventListener('click', handleClick, false)
    onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
  })
})

シナリオ 2

: watchEffect を使用して手ぶれ補正スロットルを実行します (リクエストのキャンセルなど)

const id = ref(13)
watchEffect(onInvalidate => {
   // 异步请求
  const token = performAsyncOperation(id.value)
  // 如果id频繁改变，会触发失效函数，取消之前的接口请求
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

....

もちろん

watchEffect

も実行できます修正を開くなど、さまざまな操作が可能です。

modal ポップアップ ウィンドウで、id の変更が検出された場合、onInvalidate## で初期パラメータをリセットできます。 # function... これは単なる紹介です。皆さんがもっと発見できることを願っています~ (学習ビデオ共有: Web フロントエンド開発、

基本プログラミング ビデオ

)

以上が1 つの記事で Vue3 の watchEffect について学び、その応用シナリオについて話します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。