// 立即執(zhí)行，DOM更新前觸發(fā)
watchEffect(() => {
  console.log('數(shù)據(jù)變化了，DOM更新前執(zhí)行')
})
// 立即執(zhí)行，DOM更新后觸發(fā)
watchPostEffect(() => {
  console.log('數(shù)據(jù)變化了，DOM更新后執(zhí)行')
  // 可以安全獲取更新后的DOM信息
})
// 處理異步操作
watchAsyncEffect(async () => {
  console.log('開(kāi)始異步操作')
  await fetchData() // 異步操作
  console.log('異步操作完成')
})

<template>
  <div class="container">
    <h3>計(jì)數(shù)器: {{ count }}</h3>
    <button @click="count++">增加</button>
    <div class="list-container">
      <p>列表項(xiàng)數(shù)量: {{ items.length }}</p>
      <ul ref="itemList">
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, watchEffect, watchPostEffect, watchAsyncEffect } from 'vue'
// 響應(yīng)式數(shù)據(jù)
const count = ref(0)
const items = ref([])
const itemList = ref(null)
// 1. watchEffect: DOM更新前執(zhí)行 - 適合數(shù)據(jù)處理
watchEffect(() => {
  // 當(dāng)count變化時(shí)，添加新的列表項(xiàng)
  if (count.value > 0) {
    items.value.push({
      id: count.value,
      text: `項(xiàng)目 ${count.value}`
    })
  }
  console.log('watchEffect: 處理數(shù)據(jù)，當(dāng)前列表長(zhǎng)度:', items.value.length)
  // 此時(shí)獲取的DOM高度可能不準(zhǔn)確（DOM尚未更新）
  if (itemList.value) {
    console.log('watchEffect: 列表高度(可能不準(zhǔn)確):', itemList.value.offsetHeight)
  }
})
// 2. watchPostEffect: DOM更新后執(zhí)行 - 適合操作DOM
watchPostEffect(() => {
  // 確保在DOM更新后獲取列表高度
  if (itemList.value) {
    console.log('watchPostEffect: 列表高度(準(zhǔn)確):', itemList.value.offsetHeight)
  }
})
// 3. watchAsyncEffect: 處理異步操作 - 適合API調(diào)用等異步任務(wù)
watchAsyncEffect(async () => {
  if (count.value > 0) {
    console.log('watchAsyncEffect: 開(kāi)始異步處理...')
    // 模擬API請(qǐng)求
    await new Promise(resolve => setTimeout(resolve, 500))
    console.log(`watchAsyncEffect: 異步處理完成，當(dāng)前計(jì)數(shù): ${count.value}`)
  }
})
</script>
<style>
.container {
  padding: 20px;
}
.list-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
button {
  padding: 8px 16px;
  margin-top: 10px;
  cursor: pointer;
}
</style>

watchEffect: 處理數(shù)據(jù)，當(dāng)前列表長(zhǎng)度: 1
watchEffect: 列表高度(可能不準(zhǔn)確): 0
watchPostEffect: 列表高度(準(zhǔn)確): 21
watchAsyncEffect: 開(kāi)始異步處理...
watchAsyncEffect: 異步處理完成，當(dāng)前計(jì)數(shù): 1

import { watchEffect, watchAsyncEffect, watchPostEffect, ref } from 'vue'
const count = ref(0)
// 1. 停止 watchEffect
const stopEffect = watchEffect(() => {
  console.log('count 變化:', count.value)
})
// 2. 停止 watchAsyncEffect
const stopAsyncEffect = watchAsyncEffect(async () => {
  await someAsyncOperation()
  console.log('異步處理 count:', count.value)
})
// 3. 停止 watchPostEffect
const stopPostEffect = watchPostEffect(() => {
  console.log('DOM 更新后處理 count:', count.value)
})
// 需要停止時(shí)調(diào)用
stopEffect()      // 停止 watchEffect 監(jiān)聽(tīng)
stopAsyncEffect() // 停止 watchAsyncEffect 監(jiān)聽(tīng)
stopPostEffect()  // 停止 watchPostEffect 監(jiān)聽(tīng)

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">增加</button>
    <button @click="stopAll">停止所有監(jiān)聽(tīng)</button>
  </div>
</template>
<script setup>
import { ref, watchEffect, watchAsyncEffect, watchPostEffect, onUnmounted } from 'vue'
const count = ref(0)
// 創(chuàng)建監(jiān)聽(tīng)并保存停止函數(shù)
const stopEffect = watchEffect(() => {
  console.log('watchEffect: count =', count.value)
})
const stopAsyncEffect = watchAsyncEffect(async () => {
  await new Promise(resolve => setTimeout(resolve, 100))
  console.log('watchAsyncEffect: 異步處理 count =', count.value)
})
const stopPostEffect = watchPostEffect(() => {
  console.log('watchPostEffect: DOM更新后 count =', count.value)
})
// 手動(dòng)停止所有監(jiān)聽(tīng)的方法
const stopAll = () => {
  stopEffect()
  stopAsyncEffect()
  stopPostEffect()
  console.log('所有監(jiān)聽(tīng)已停止')
}
// 組件卸載時(shí)自動(dòng)停止（推薦做法）
onUnmounted(() => {
  stopEffect()
  stopAsyncEffect()
  stopPostEffect()
})
</script>

const keywords = ref('')
const list = ref([...])
const filteredList = ref([])
watchEffect(() => {
  // 同步過(guò)濾數(shù)據(jù)，DOM 更新前執(zhí)行
  filteredList.value = list.value.filter(item => 
    item.name.includes(keywords.value)
  )
})

const password = ref('')
const confirmPwd = ref('')
const pwdError = ref('')
watchEffect(() => {
  // 實(shí)時(shí)校驗(yàn)，無(wú)需等待 DOM
  if (confirmPwd.value && confirmPwd.value !== password.value) {
    pwdError.value = '兩次密碼不一致'
  } else {
    pwdError.value = ''
  }
})

const messages = ref([])
const messageList = ref(null)
// 新增消息時(shí)，滾動(dòng)到底部（依賴(lài)更新后的 DOM）
watchPostEffect(() => {
  if (messageList.value) {
    messageList.value.scrollTop = messageList.value.scrollHeight
  }
})

const activeEl = ref(null)
const elPosition = ref({ top: 0, left: 0 })
watchPostEffect(() => {
  if (activeEl.value) {
    // 獲取元素實(shí)際位置（DOM 更新后才準(zhǔn)確）
    const rect = activeEl.value.getBoundingClientRect()
    elPosition.value = { top: rect.top, left: rect.left }
  }
})

const chartData = ref([])
const chartContainer = ref(null)
watchPostEffect(() => {
  // 確保容器 DOM 已更新，再初始化圖表
  if (chartContainer.value) {
    initChart(chartContainer.value, chartData.value)
  }
})

const searchQuery = ref('')
const searchResult = ref([])
watchAsyncEffect(async () => {
  if (!searchQuery.value) {
    searchResult.value = []
    return
  }
  // 異步請(qǐng)求，Vue 會(huì)自動(dòng)處理競(jìng)態(tài)（后一次請(qǐng)求會(huì)等待前一次完成）
  const res = await fetch(`/api/search?query=${searchQuery.value}`)
  searchResult.value = await res.json()
})

const inputValue = ref('')
watchAsyncEffect(async () => {
  // 延遲 500ms 執(zhí)行，避免頻繁觸發(fā)
  await new Promise(resolve => setTimeout(resolve, 500))
  await saveToServer(inputValue.value) // 異步保存
})

const userId = ref('')
const userPosts = ref([])
watchAsyncEffect(async () => {
  if (!userId.value) return
  // 先獲取用戶(hù)信息，再獲取用戶(hù)文章（依賴(lài)前一步異步結(jié)果）
  const user = await fetchUser(userId.value)
  const posts = await fetchPosts(user.id)
  userPosts.value = posts
})