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中文網其他相關文章！