vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别对比分析

// 立即执行，DOM更新前触发
watchEffect(() => {
  console.log('数据变化了，DOM更新前执行')
})
// 立即执行，DOM更新后触发
watchPostEffect(() => {
  console.log('数据变化了，DOM更新后执行')
  // 可以安全获取更新后的DOM信息
})
// 处理异步操作
watchAsyncEffect(async () => {
  console.log('开始异步操作')
  await fetchData() // 异步操作
  console.log('异步操作完成')
})

<template>
  <div class="container">
    <h3>计数器: {{ count }}</h3>
    <button @click="count++">增加</button>
    <div class="list-container">
      <p>列表项数量: {{ 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'
// 响应式数据
const count = ref(0)
const items = ref([])
const itemList = ref(null)
// 1. watchEffect: DOM更新前执行 - 适合数据处理
watchEffect(() => {
  // 当count变化时，添加新的列表项
  if (count.value > 0) {
    items.value.push({
      id: count.value,
      text: `项目 ${count.value}`
    })
  }
  console.log('watchEffect: 处理数据，当前列表长度:', items.value.length)
  // 此时获取的DOM高度可能不准确（DOM尚未更新）
  if (itemList.value) {
    console.log('watchEffect: 列表高度(可能不准确):', itemList.value.offsetHeight)
  }
})
// 2. watchPostEffect: DOM更新后执行 - 适合操作DOM
watchPostEffect(() => {
  // 确保在DOM更新后获取列表高度
  if (itemList.value) {
    console.log('watchPostEffect: 列表高度(准确):', itemList.value.offsetHeight)
  }
})
// 3. watchAsyncEffect: 处理异步操作 - 适合API调用等异步任务
watchAsyncEffect(async () => {
  if (count.value > 0) {
    console.log('watchAsyncEffect: 开始异步处理...')
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 500))
    console.log(`watchAsyncEffect: 异步处理完成，当前计数: ${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: 处理数据，当前列表长度: 1
watchEffect: 列表高度(可能不准确): 0
watchPostEffect: 列表高度(准确): 21
watchAsyncEffect: 开始异步处理...
watchAsyncEffect: 异步处理完成，当前计数: 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)
})
// 需要停止时调用
stopEffect()      // 停止 watchEffect 监听
stopAsyncEffect() // 停止 watchAsyncEffect 监听
stopPostEffect()  // 停止 watchPostEffect 监听

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">增加</button>
    <button @click="stopAll">停止所有监听</button>
  </div>
</template>
<script setup>
import { ref, watchEffect, watchAsyncEffect, watchPostEffect, onUnmounted } from 'vue'
const count = ref(0)
// 创建监听并保存停止函数
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)
})
// 手动停止所有监听的方法
const stopAll = () => {
  stopEffect()
  stopAsyncEffect()
  stopPostEffect()
  console.log('所有监听已停止')
}
// 组件卸载时自动停止（推荐做法）
onUnmounted(() => {
  stopEffect()
  stopAsyncEffect()
  stopPostEffect()
})
</script>

const keywords = ref('')
const list = ref([...])
const filteredList = ref([])
watchEffect(() => {
  // 同步过滤数据，DOM 更新前执行
  filteredList.value = list.value.filter(item => 
    item.name.includes(keywords.value)
  )
})

const password = ref('')
const confirmPwd = ref('')
const pwdError = ref('')
watchEffect(() => {
  // 实时校验，无需等待 DOM
  if (confirmPwd.value && confirmPwd.value !== password.value) {
    pwdError.value = '两次密码不一致'
  } else {
    pwdError.value = ''
  }
})

const messages = ref([])
const messageList = ref(null)
// 新增消息时，滚动到底部（依赖更新后的 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) {
    // 获取元素实际位置（DOM 更新后才准确）
    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
  }
  // 异步请求，Vue 会自动处理竞态（后一次请求会等待前一次完成）
  const res = await fetch(`/api/search?query=${searchQuery.value}`)
  searchResult.value = await res.json()
})

const inputValue = ref('')
watchAsyncEffect(async () => {
  // 延迟 500ms 执行，避免频繁触发
  await new Promise(resolve => setTimeout(resolve, 500))
  await saveToServer(inputValue.value) // 异步保存
})

const userId = ref('')
const userPosts = ref([])
watchAsyncEffect(async () => {
  if (!userId.value) return
  // 先获取用户信息，再获取用户文章（依赖前一步异步结果）
  const user = await fetchUser(userId.value)
  const posts = await fetchPosts(user.id)
  userPosts.value = posts
})