本節(jié)使用單文件組件語法作為代碼示例

#計算值

有時我們需要依賴于其他狀態(tài)的狀態(tài)——在 Vue 中，這是用組件計算屬性處理的，以直接創(chuàng)建計算值，我們可以使用?computed?方法：它接受 getter 函數(shù)并為 getter 返回的值返回一個不可變的響應(yīng)式?ref?對象。

1. const count = ref(1)
2. const plusOne = computed(() => count.value++)
5. console.log(plusOne.value) // 2
8. plusOne.value++ // error

或者，它可以使用一個帶有?get?和?set?函數(shù)的對象來創(chuàng)建一個可寫的 ref 對象。

1. const count = ref(1)
2. const plusOne = computed({
3. get: () => count.value + 1,
4. set: val => {
5. count.value = val - 1
6. }
7. })
10. plusOne.value = 1
11. console.log(count.value) // 0

#watchEffect

為了根據(jù)響應(yīng)式狀態(tài)自動應(yīng)用和重新應(yīng)用副作用，我們可以使用?watchEffect?方法。它立即執(zhí)行傳入的一個函數(shù)，同時響應(yīng)式追蹤其依賴，并在其依賴變更時重新運行該函數(shù)。

1. const count = ref(0)
4. watchEffect(() => console.log(count.value))
5. // -> logs 0
8. setTimeout(() => {
9. count.value++
10. // -> logs 1
11. }, 100)

#停止偵聽

當(dāng)?watchEffect?在組件的?setup()?函數(shù)或生命周期鉤子被調(diào)用時，偵聽器會被鏈接到該組件的生命周期，并在組件卸載時自動停止。

在一些情況下，也可以顯式調(diào)用返回值以停止偵聽：

1. const stop = watchEffect(() => {
2. /* ... */
3. })
6. // later
7. stop()

#清除副作用

有時副作用函數(shù)會執(zhí)行一些異步的副作用，這些響應(yīng)需要在其失效時清除 (即完成之前狀態(tài)已改變了) 。所以偵聽副作用傳入的函數(shù)可以接收一個?onInvalidate?函數(shù)作入?yún)?#xff0c;用來注冊清理失效時的回調(diào)。當(dāng)以下情況發(fā)生時，這個失效回調(diào)會被觸發(fā)：

• 副作用即將重新執(zhí)行時
• 偵聽器被停止 (如果在?setup()?或生命周期鉤子函數(shù)中使用了?watchEffect，則在組件卸載時)

1. watchEffect(onInvalidate => {
2. const token = performAsyncOperation(id.value)
3. onInvalidate(() => {
4. // id has changed or watcher is stopped.
5. // invalidate previously pending async operation
6. token.cancel()
7. })
8. })

我們之所以是通過傳入一個函數(shù)去注冊失效回調(diào)，而不是從回調(diào)返回它，是因為返回值對于異步錯誤處理很重要。

在執(zhí)行數(shù)據(jù)請求時，副作用函數(shù)往往是一個異步函數(shù)：

1. const data = ref(null)
2. watchEffect(async onInvalidate => {
3. onInvalidate(() => {...}) // 我們在Promise解析之前注冊清除函數(shù)
4. data.value = await fetchData(props.id)
5. })

我們知道異步函數(shù)都會隱式地返回一個 Promise，但是清理函數(shù)必須要在 Promise 被 resolve 之前被注冊。另外，Vue 依賴這個返回的 Promise 來自動處理 Promise 鏈上的潛在錯誤。

#副作用刷新時機(jī)

Vue 的響應(yīng)性系統(tǒng)會緩存副作用函數(shù)，并異步地刷新它們，這樣可以避免同一個“tick” 中多個狀態(tài)改變導(dǎo)致的不必要的重復(fù)調(diào)用。在核心的具體實現(xiàn)中，組件的?update?函數(shù)也是一個被偵聽的副作用。當(dāng)一個用戶定義的副作用函數(shù)進(jìn)入隊列時，默認(rèn)情況下，會在所有的組件?update?前執(zhí)行：

1. <template>
2. <div>{{ count }}</div>
3. </template>
6. <script>
7. export default {
8. setup() {
9. const count = ref(0)
12. watchEffect(() => {
13. console.log(count.value)
14. })
17. return {
18. count
19. }
20. }
21. }
22. </script>

在這個例子中：

• count?會在初始運行時同步打印出來
• 更改?count?時，將在組件更新前執(zhí)行副作用。

如果需要在組件更新后重新運行偵聽器副作用，我們可以傳遞帶有?flush?選項的附加?options?對象 (默認(rèn)為?'pre')：

1. // fire before component updates
2. watchEffect(
3. () => {
4. /* ... */
5. },
6. {
7. flush: 'post'
8. }
9. )

flush?選項還接受?sync，這將強(qiáng)制效果始終同步觸發(fā)。然而，這是低效的，應(yīng)該很少需要。

#偵聽器調(diào)試

onTrack?和?onTrigger?選項可用于調(diào)試偵聽器的行為。

• onTrack?將在響應(yīng)式 property 或 ref 作為依賴項被追蹤時被調(diào)用。
• onTrigger?將在依賴項變更導(dǎo)致副作用被觸發(fā)時被調(diào)用。

這兩個回調(diào)都將接收到一個包含有關(guān)所依賴項信息的調(diào)試器事件。建議在以下回調(diào)中編寫?debugger?語句來檢查依賴關(guān)系：

1. watchEffect(
2. () => {
3. /* 副作用 */
4. },
5. {
6. onTrigger(e) {
7. debugger
8. }
9. }
10. )

onTrack?和?onTrigger?只能在開發(fā)模式下工作。

#watch

watch?API 完全等同于組件偵聽器?property。watch?需要偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。默認(rèn)情況下，它也是惰性的，即只有當(dāng)被偵聽的源發(fā)生變化時才執(zhí)行回調(diào)。

• 與 watchEffect 比較，watch?允許我們：
  • 懶執(zhí)行副作用；
  • 更具體地說明什么狀態(tài)應(yīng)該觸發(fā)偵聽器重新運行；
  • 訪問偵聽狀態(tài)變化前后的值。

#偵聽單個數(shù)據(jù)源

偵聽器數(shù)據(jù)源可以是返回值的 getter 函數(shù)，也可以直接是?ref：

1. // 偵聽一個 getter
2. const state = reactive({ count: 0 })
3. watch(
4. () => state.count,
5. (count, prevCount) => {
6. /* ... */
7. }
8. )
11. // 直接偵聽ref
12. const count = ref(0)
13. watch(count, (count, prevCount) => {
14. /* ... */
15. })

#偵聽多個數(shù)據(jù)源

偵聽器還可以使用數(shù)組同時偵聽多個源：

1. watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
2. /* ... */
3. })

#與?watchEffect?共享的行為

watch?與?watchEffect共享停止偵聽，清除副作用 (相應(yīng)地?onInvalidate?會作為回調(diào)的第三個參數(shù)傳入)、副作用刷新時機(jī)和偵聽器調(diào)試行為。