Vue3 の watchEffect 機能とは何ですか

watchEffect は Vue3 で提供される新機能で、応答データの変更を監視し、データ変更時に指定されたコールバック関数を実行するために使用されます。

Vue2 の watch とは異なり、watchEffect は監視するデータを指定する必要はなく、関数内で使用されるリアクティブ データを自動的に追跡して使用します。これらのコールバック関数は、データが変更されると再実行されます。この自動追跡機能により、コードが簡素化され、アプリケーションのパフォーマンスが向上します。

次は、watchEffect の使用例です:

import { watchEffect, reactive } from 'vue'
const state = reactive({
  count: 0
})
watchEffect(() => {
  console.log(state.count)
})

上記のコードでは、reactive 関数を使用してリアクティブ オブジェクトを作成しますstate を使用し、watchEffect を使用して state.count プロパティの変更を監視しました。 state.count が変更されると、コールバック関数が再実行されます。

watchEffect は停止する必要のないリスナー関数を返すことに注意してください。リスニングを停止する必要がある場合は、このリスナー関数を呼び出してリスニングを停止できます。

応答データの変更を監視することに加えて、watchEffect は、this キーワードや計算されたプロパティなど、コールバック関数内のコンポーネントのコンテキストへのアクセスもサポートします。成分。

これは、watchEffect を使用してコンポーネントの計算されたプロパティにアクセスする例です:

import { watchEffect, computed } from 'vue'
export default {
  computed: {
    doubleCount () {
      return this.count * 2
    }
  },
  mounted () {
    watchEffect(() => {
      console.log(this.doubleCount)
    })
  }
}

上記のコードでは、computed 関数を使用して を作成します。プロパティ doubleCount を計算し、mounted フック関数の watchEffect を使用して、doubleCount の変更をリッスンします。 doubleCount が変更されると、コールバック関数が再実行されます。

以上がVue3 の watchEffect 機能とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。