watchEffect 是 Vue3 中提供的一個新特性，用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時執(zhí)行指定的回調(diào)函數(shù)。

與 Vue2 中的 watch 不同，watchEffect 不需要指定要監(jiān)聽的數(shù)據(jù)，而是會自動追蹤函數(shù)中使用的響應(yīng)式數(shù)據(jù)，并在這些數(shù)據(jù)發(fā)生變化時重新執(zhí)行回調(diào)函數(shù)。這種自動追蹤的特性可以簡化代碼，并提高應(yīng)用的性能。

下面是一個使用 watchEffect 的示例：

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

在上面的代碼中，我們使用 reactive 函數(shù)創(chuàng)建了一個響應(yīng)式對象 state，并使用 watchEffect 監(jiān)聽了 state.count 屬性的變化。當 state.count 發(fā)生變化時，回調(diào)函數(shù)會被重新執(zhí)行。

需要注意的是，watchEffect 返回一個無需停止的監(jiān)聽器函數(shù)。如果需要停止監(jiān)聽，可以調(diào)用這個監(jiān)聽器函數(shù)來停止監(jiān)聽。

除了監(jiān)聽響應(yīng)式數(shù)據(jù)的變化外，watchEffect 還支持在回調(diào)函數(shù)中訪問組件的上下文，例如 this 關(guān)鍵字和組件的計算屬性等。

下面是一個使用 watchEffect 訪問組件計算屬性的示例：

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

在上面的代碼中，我們使用 computed 函數(shù)創(chuàng)建了一個計算屬性 doubleCount，并在 mounted 鉤子函數(shù)中使用 watchEffect 監(jiān)聽了 doubleCount 的變化。當 doubleCount 發(fā)生變化時，回調(diào)函數(shù)會被重新執(zhí)行。

總之，watchEffect 是 Vue3 中非常有用的一個特性，它可以讓我們輕松地監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時執(zhí)行指定的回調(diào)函數(shù)，從而簡化代碼并提高應(yīng)用的性能。

到此這篇關(guān)于Vue3 中的 watchEffect 特性詳解的文章就介紹到這了,更多相關(guān)Vue3 watchEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論