<template>
  <div>
    <p>計(jì)數(shù)器: {{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 創(chuàng)建響應(yīng)式數(shù)據(jù)
const count = ref(0)

// 監(jiān)聽(tīng)count變化
// 第一個(gè)參數(shù)：要監(jiān)聽(tīng)的數(shù)據(jù)源
// 第二個(gè)參數(shù)：回調(diào)函數(shù)，接收新值和舊值
watch(count, (newValue, oldValue) => {
  console.log(`count從${oldValue}變?yōu)?{newValue}`)
})
</script>

import { ref, watch } from 'vue'

const firstName = ref('張')
const lastName = ref('三')

// 監(jiān)聽(tīng)多個(gè)數(shù)據(jù)，用數(shù)組形式傳入
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`姓名從${oldFirst}${oldLast}變?yōu)?{newFirst}${newLast}`)
})

import { reactive, watch } from 'vue'

const user = reactive({
  name: '張三',
  age: 20
})

// 監(jiān)聽(tīng)對(duì)象的某個(gè)屬性，使用getter函數(shù)
watch(
  () => user.age,  // getter函數(shù)，返回要監(jiān)聽(tīng)的屬性
  (newAge, oldAge) => { console.log(`年齡從${oldAge}變?yōu)?{newAge}`)
  }
)

import { ref, watch } from 'vue'

const user = ref({
  name: '張三',
  address: {
    city: '北京'
  }
})

// 深度監(jiān)聽(tīng)對(duì)象內(nèi)部變化
watch(
  user,
  (newVal, oldVal) => { console.log('用戶(hù)信息變化:', newVal)},
  { deep: true }  // 開(kāi)啟深度監(jiān)聽(tīng)
)

// 修改深層屬性會(huì)觸發(fā)監(jiān)聽(tīng)
user.value.address.city = '上海'

watch(
  count,
  (newValue, oldValue) => {
    console.log(`count變化: ${newValue}`)
  },
  { immediate: true }  // 立即執(zhí)行
)

<template>
  <div>
    <p>計(jì)數(shù)器: {{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0)

// watchEffect會(huì)自動(dòng)收集依賴(lài)
// 1. 初始化時(shí)立即執(zhí)行一次
// 2. 當(dāng)函數(shù)內(nèi)依賴(lài)的響應(yīng)式數(shù)據(jù)變化時(shí)重新執(zhí)行
watchEffect(  () => {console.log(`count的值是: ${count.value}`)}
)
</script>

import { ref, watchEffect } from 'vue'

const count = ref(0)

// 獲取停止函數(shù)
const stop = watchEffect(() => {
  console.log(`count: ${count.value}`)
})

// 5秒后停止監(jiān)聽(tīng)
setTimeout(() => {
  stop()
  console.log('已停止監(jiān)聽(tīng)')
}, 5000)

watchEffect((onInvalidate) => {
  // 模擬異步操作
  const timer = setTimeout(() => {
    console.log('異步操作完成')
  }, 1000)
  
  // 清理函數(shù)，在下次執(zhí)行前或停止監(jiān)聽(tīng)時(shí)調(diào)用
  onInvalidate(() => {
    clearTimeout(timer)
    console.log('清理定時(shí)器')
  })
})

watch(
  count,
  () => {
    // DOM更新后執(zhí)行
  },
  { flush: 'post' }  // 'pre'(默認(rèn)) | 'post' | 'sync'
)

watch(
  count,
  () => {
    console.log('count變化了')
  },
  {
    onTrack(e) {
      console.log('依賴(lài)被追蹤:', e)
    },
    onTrigger(e) {
      console.log('監(jiān)聽(tīng)器被觸發(fā):', e)
    }
  }
)

const { pause, resume } = watch(count, () => {
  console.log('count變化了')
})

// 暫停監(jiān)聽(tīng)
pause()

// 恢復(fù)監(jiān)聽(tīng)
resume()

import { ref, watch } from 'vue'

const username = ref('')
const errorMessage = ref('')

// 監(jiān)聽(tīng)用戶(hù)名變化進(jìn)行驗(yàn)證
watch(
  username,
  (newVal) => {
    if (newVal.length < 3) {
      errorMessage.value = '用戶(hù)名至少3個(gè)字符'
    } else {
      errorMessage.value = ''
    }
  },
  { immediate: true }  // 初始化時(shí)驗(yàn)證
)

import { ref, watchEffect } from 'vue'

const userId = ref(1)
const userData = ref(null)

watchEffect(async (onInvalidate) => {
  // 加載數(shù)據(jù)
  const controller = new AbortController()
  const signal = controller.signal
  
  try {
    const response = await fetch(`/api/user/${userId.value}`, { signal })
    userData.value = await response.json()
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('加載失敗:', error)
    }
  }
  
  // 清理函數(shù)，取消上一次請(qǐng)求
  onInvalidate(() => {
    controller.abort()
  })
})

import { reactive, watch } from 'vue'

const user = reactive({
  name: '張三',
  age: 20
})

// 情況一：直接監(jiān)聽(tīng)reactive對(duì)象
// 此時(shí)會(huì)自動(dòng)開(kāi)啟深度監(jiān)聽(tīng)，無(wú)需設(shè)置deep: true
watch(user, (newVal, oldVal) => {
  console.log('用戶(hù)信息變化', newVal)
})

// 情況二：監(jiān)聽(tīng)reactive對(duì)象的屬性
// 必須使用getter函數(shù)，否則無(wú)法觸發(fā)監(jiān)聽(tīng)
watch(
  () => user.age,  // 正確寫(xiě)法
  (newAge) => {
    console.log('年齡變化:', newAge)
  }
)

// 錯(cuò)誤寫(xiě)法：直接監(jiān)聽(tīng)屬性無(wú)法觸發(fā)
watch(user.age, () => {
  console.log('年齡變化') // 不會(huì)執(zhí)行
})

import { ref, watchEffect } from 'vue'

const a = ref(0)
const b = ref(0)

watchEffect(() => {
  console.log('watchEffect執(zhí)行')
  if (a.value > 5) {
    console.log('b的值:', b.value)
  }
})

// 初始執(zhí)行: 輸出 "watchEffect執(zhí)行"

a.value = 3  // 執(zhí)行: 輸出 "watchEffect執(zhí)行" (a被訪(fǎng)問(wèn))
b.value = 5  // 不執(zhí)行 (b未被訪(fǎng)問(wèn))
a.value = 6  // 執(zhí)行: 輸出 "watchEffect執(zhí)行" 和 "b的值: 5" (a和b都被訪(fǎng)問(wèn))
b.value = 10 // 執(zhí)行: 輸出 "watchEffect執(zhí)行" 和 "b的值: 10" (b現(xiàn)在被訪(fǎng)問(wèn)了)

watch(
  count,
  () => {
    console.log('count變化了')
  },
  {
    onTrack(e) {
      // 當(dāng)依賴(lài)被追蹤時(shí)觸發(fā)
      console.log(`追蹤到依賴(lài): ${e.target}的${e.key}屬性`)
    },
    onTrigger(e) {
      // 當(dāng)監(jiān)聽(tīng)器被觸發(fā)時(shí)觸發(fā)
      console.log(`監(jiān)聽(tīng)器觸發(fā)原因: ${e.type}`)
    }
  }
)

// 不推薦：深度監(jiān)聽(tīng)大型對(duì)象
watch(largeObject, () => {
  // ...
}, { deep: true })

// 推薦：只監(jiān)聽(tīng)需要的屬性
watch(
  () => largeObject.importantProperty,
  () => {
    // ...
  }
)

import { ref, watchEffect } from 'vue'
import { debounce } from 'lodash'

const searchInput = ref('')

// 使用防抖優(yōu)化搜索請(qǐng)求
const debouncedSearch = debounce(async (value) => {
  const results = await fetch(`/api/search?q=${value}`)
  // 處理結(jié)果
}, 300)

watchEffect(() => {
  debouncedSearch(searchInput.value)
})

// 錯(cuò)誤：監(jiān)聽(tīng)普通變量
let count = 0
watch(count, () => { /* 不會(huì)觸發(fā) */ })

// 正確：監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)
const count = ref(0)
watch(count, () => { /* 會(huì)觸發(fā) */ })

const list = ref([1, 2, 3])

// 錯(cuò)誤：直接修改索引
list.value[0] = 100  // 不會(huì)觸發(fā)監(jiān)聽(tīng)

// 正確：使用數(shù)組方法或set
list.value.push(4)   // 會(huì)觸發(fā)
list.value.splice(0, 1, 100)  // 會(huì)觸發(fā)

const user = reactive({ name: '張三' })

// 錯(cuò)誤：直接添加屬性
user.age = 20  // 默認(rèn)不會(huì)觸發(fā)監(jiān)聽(tīng)

// 正確：使用Vue.set或重新賦值
user.age = 20  // 在Vue3中，reactive對(duì)象新增屬性會(huì)觸發(fā)監(jiān)聽(tīng)
// 或?qū)τ趓ef對(duì)象
user.value = { ...user.value, age: 20 }

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      placeholder="搜索..."
      @input="handleInput"
    >
    <div v-if="isSearching" class="loading">搜索中...</div>
    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
    <ul v-else-if="results.length">
      <li v-for="result in results" :key="result.id">{{ result.name }}</li>
    </ul>
    <div v-else-if="!isSearching && searchQuery">無(wú)結(jié)果</div>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect, computed, onUnmounted } from 'vue'

// 響應(yīng)式數(shù)據(jù)
const searchQuery = ref('')
const results = ref([])
const isSearching = ref(false)
const errorMessage = ref('')
const debouncedQuery = ref('')

// 防抖處理
let timeoutId = null
const handleInput = () => {
  clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    debouncedQuery.value = searchQuery.value
  }, 300)
}

// 使用watch處理搜索邏輯
watch(
  debouncedQuery,
  async (newQuery) => {
    if (!newQuery.trim()) {
      results.value = []
      return
    }
    
    isSearching.value = true
    errorMessage.value = ''
    
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(newQuery)}`)
      if (!response.ok) throw new Error('搜索失敗')
      results.value = await response.json()
    } catch (err) {
      errorMessage.value = err.message
    } finally {
      isSearching.value = false
    }
  },
  { immediate: false }
)

// 使用watchEffect清理定時(shí)器
watchEffect((onInvalidate) => {
  // 組件卸載時(shí)清理定時(shí)器
  onInvalidate(() => {
    clearTimeout(timeoutId)
  })
})

// 清理函數(shù)
onUnmounted(() => {
  clearTimeout(timeoutId)
})
</script>

1. 當(dāng)watch/watchEffect執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)"副作用函數(shù)"(effect)
2. 執(zhí)行副作用函數(shù)，期間訪(fǎng)問(wèn)的響應(yīng)式數(shù)據(jù)會(huì)被"追蹤"(track)
3. 響應(yīng)式數(shù)據(jù)變化時(shí)，會(huì)"觸發(fā)"(trigger)相關(guān)的副作用函數(shù)重新執(zhí)行

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  響應(yīng)式數(shù)據(jù)  │────?│  依賴(lài)追蹤器  │────?│ 副作用函數(shù)隊(duì)列 │
└─────────────┘     └─────────────┘     └─────────────┘
       ▲                                          │
       │                                          ▼
       └──────────────────────────────────────────┘
              (數(shù)據(jù)變化時(shí)觸發(fā)副作用執(zhí)行)

// watch的簡(jiǎn)化實(shí)現(xiàn)
function watch(source, callback, options) {
  // 創(chuàng)建getter函數(shù)
  const getter = isRef(source) 
    ? () => source.value 
    : typeof source === 'function' 
      ? source 
      : () => traverse(source);
  
  // 執(zhí)行副作用
  let oldValue = undefined;
  const effect = effectFn(() => getter(), {
    lazy: true, // 懶執(zhí)行，首次不觸發(fā)
    scheduler: () => { // 調(diào)度函數(shù)
      const newValue = getter();
      callback(newValue, oldValue);
      oldValue = newValue;
    }
  });
  
  // 初始化
  if (options.immediate) {
    callback(getter(), oldValue);
  } else {
    oldValue = effect();
  }
  
  return () => stop(effect);
}

// watchEffect的簡(jiǎn)化實(shí)現(xiàn)
function watchEffect(effect, options) {
  const _effect = effectFn(effect, {
    lazy: false, // 立即執(zhí)行
    scheduler: queueJob, // 默認(rèn)調(diào)度器
    ...options
  });
  
  return () => stop(_effect);
}

// TypeScript類(lèi)型定義
function watch<T>(
  source: WatchSource<T> | WatchSource<T>[],
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle

interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean  // 是否立即執(zhí)行，默認(rèn)false
  deep?: boolean       // 是否深度監(jiān)聽(tīng)，默認(rèn)false
  flush?: 'pre' | 'post' | 'sync'  // 執(zhí)行時(shí)機(jī)，默認(rèn)'pre'
  once?: boolean       // 是否只執(zhí)行一次，Vue3.4+，默認(rèn)false
  onTrack?: (event: DebuggerEvent) => void  // 依賴(lài)追蹤時(shí)觸發(fā)
  onTrigger?: (event: DebuggerEvent) => void  // 觸發(fā)更新時(shí)觸發(fā)
}

// 示例：在DOM更新后執(zhí)行
watch(
  count,
  () => {
    // 此時(shí)可以獲取到更新后的DOM
    console.log('DOM高度:', document.getElementById('content').offsetHeight)
  },
  { flush: 'post' }
)

import { ref, watch, reactive } from 'vue'

// 1. 監(jiān)聽(tīng)ref
const count = ref<number>(0)
watch<number>(count, (newVal, oldVal) => {
  // newVal和oldVal都會(huì)被推斷為number類(lèi)型
})

// 2. 監(jiān)聽(tīng)reactive對(duì)象
interface User {
  name: string
  age: number
}
const user = reactive<User>({ name: '張三', age: 20 })
watch(
  () => user.age, 
  (newAge: number, oldAge: number) => {
    // 顯式指定類(lèi)型
  }
)

// 3. 監(jiān)聽(tīng)多個(gè)源
watch<[number, string]>(
  [count, () => user.name], 
  ([newCount, newName], [oldCount, oldName]) => {
    // 類(lèi)型安全
  }
)

import { ref, watch, WatchSource } from 'vue'

// 定義通用監(jiān)聽(tīng)器類(lèi)型
type CustomWatcher<T> = (
  source: WatchSource<T>,
  callback: (newVal: T, oldVal: T) => void
) => void

// 創(chuàng)建帶類(lèi)型的監(jiān)聽(tīng)器
const numberWatcher: CustomWatcher<number> = (source, callback) => {
  return watch(source, callback)
}

// 使用
const count = ref(0)
numberWatcher(count, (newVal, oldVal) => {
  // 類(lèi)型安全
})

1. 確認(rèn)監(jiān)聽(tīng)源是響應(yīng)式數(shù)據(jù)
   - 使用isRef/isReactive檢查
   - 確認(rèn)不是解構(gòu)后的值

2. 檢查監(jiān)聽(tīng)路徑是否正確
   - 對(duì)象屬性需使用getter函數(shù)
   - 數(shù)組需監(jiān)聽(tīng)整個(gè)數(shù)組或使用正確索引

3. 驗(yàn)證數(shù)據(jù)確實(shí)發(fā)生了變化
   - 使用console.log打印數(shù)據(jù)
   - 確認(rèn)不是引用類(lèi)型數(shù)據(jù)的內(nèi)部變化

4. 檢查是否需要深度監(jiān)聽(tīng)
   - 對(duì)象/數(shù)組內(nèi)部變化需設(shè)置deep: true

5. 檢查是否有條件執(zhí)行問(wèn)題
   - watchEffect中是否有條件語(yǔ)句導(dǎo)致依賴(lài)未被訪(fǎng)問(wèn)

// 不好的做法：監(jiān)聽(tīng)整個(gè)對(duì)象
watch(
  user,
  () => {
    // 即使無(wú)關(guān)屬性變化也會(huì)觸發(fā)
  },
  { deep: true }
)

// 好的做法：只監(jiān)聽(tīng)需要的屬性
watch(
  () => ({ name: user.name, age: user.age }),
  ({ name, age }) => {
    // 只有這兩個(gè)屬性變化才觸發(fā)
  }
)

import { ref, watch } from 'vue'
import { debounce, throttle } from 'lodash'

// 防抖示例
const searchInput = ref('')
const debouncedSearch = debounce((value) => {
  // 搜索邏輯
}, 300)

watch(searchInput, debouncedSearch)

// 節(jié)流示例
const scrollPosition = ref(0)
const throttledScroll = throttle((position) => {
  // 滾動(dòng)處理邏輯
}, 100)

watch(scrollPosition, throttledScroll)

import { shallowRef, watch } from 'vue'

// 大型數(shù)據(jù)使用shallowRef
const largeList = shallowRef([])

// 只監(jiān)聽(tīng)引用變化，不監(jiān)聽(tīng)內(nèi)部屬性
watch(largeList, () => {
  // 只有當(dāng)整個(gè)列表被替換時(shí)才觸發(fā)
})

import { ref, watch, watchEffect } from 'vue'
import { mount } from '@vue/test-utils'

describe('watch測(cè)試', () => {
  it('基本監(jiān)聽(tīng)功能', async () => {
    const count = ref(0)
    const mockCallback = jest.fn()
    
    watch(count, mockCallback)
    
    // 初始狀態(tài)不觸發(fā)
    expect(mockCallback).not.toHaveBeenCalled()
    
    // 修改值后觸發(fā)
    count.value = 1
    await Promise.resolve() // 等待微任務(wù)完成
    
    expect(mockCallback).toHaveBeenCalledWith(1, 0)
  })
  
  it('watchEffect立即執(zhí)行', () => {
    const mockEffect = jest.fn()
    watchEffect(mockEffect)
    
    // 立即執(zhí)行
    expect(mockEffect).toHaveBeenCalled()
  })
})

┌─────────────────────────────────────────────┐
│  需要知道數(shù)據(jù)變化前后的值                   │
│  ↓                                         │
│  需要明確指定監(jiān)聽(tīng)源                         │
│  ↓              ┌───────────────┐          │
│  是────────────?│     watch     │?─────────┐
│  ↓              └───────────────┘          │
│  否                                         │
│  ↓              ┌───────────────┐          │
│  需要自動(dòng)收集依賴(lài) ─────────────?│watchEffect│?─────────┐
│                 └───────────────┘          │
│                                            │
│  需要緩存計(jì)算結(jié)果 ─────────────?│ computed  │
└─────────────────────────────────────────────┘