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

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

下面是一個(gè)使用 watchEffect 的示例：

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

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

需要注意的是，watchEffect 返回一個(gè)無(wú)需停止的監(jiān)聽(tīng)器函數(shù)。如果需要停止監(jiān)聽(tīng)，可以調(diào)用這個(gè)監(jiān)聽(tīng)器函數(shù)來(lái)停止監(jiān)聽(tīng)。

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

下面是一個(gè)使用 watchEffect 訪問(wèn)組件計(jì)算屬性的示例：

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

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

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

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

最新評(píng)論