Vue3中watch和watchEffect的区别及使用技巧总结

详细讲解Vue 3 组合式 API 中watch和watchEffect的核心区别，以及它们的实际使用技巧，以便在开发中根据场景正确选择合适的侦听器。

一、先明确两者的核心定位

在 Vue 3 组合式 API 中，watch和watchEffect都是用于监听响应式数据变化并执行副作用的工具，但设计理念和使用场景有明显区别：

• watch：显式监听指定的响应式数据源，惰性执行（默认），支持访问新旧值，控制力更强。
• watchEffect：隐式监听函数内用到的所有响应式数据源，立即执行（默认），自动追踪依赖，写法更简洁。

二、核心区别对比（表格 + 示例）

1. 依赖追踪方式对比（最核心区别）

watch：显式指定监听源

必须明确告诉watch要监听哪个 / 哪些响应式数据，未指定的不会被追踪：

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

const count = ref(0)
const name = ref('Vue')

// 显式监听 count，name 变化不会触发此 watch
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变成${newVal}`)
})

// 显式监听多个源（数组形式）
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count变化：${oldCount}→${newCount}，name变化：${oldName}→${newName}`)
})
</script>

watchEffect：隐式追踪依赖

无需指定监听源，函数内用到的所有响应式数据都会被自动追踪：

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

const count = ref(0)
const name = ref('Vue')

// 自动追踪 count 和 name（函数内用到了这两个响应式数据）
watchEffect(() => {
  console.log(`当前count：${count.value}，当前name：${name.value}`)
})
// 首次执行输出：当前count：0，当前name：Vue（立即执行特性）
// 当count或name变化时，会重新执行
</script>

2. 执行时机对比

watch：默认懒执行

只有监听源发生变化时才会执行，组件挂载时不会主动执行：

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

const count = ref(0)

// 组件挂载时不会执行，只有 count 变化时才执行
watch(count, (newVal) => {
  console.log(`count变化了：${newVal}`)
})

// 若需要立即执行，需手动设置 immediate: true
watch(count, (newVal) => {
  console.log(`count（立即执行）：${newVal}`)
}, { immediate: true }) // 组件挂载时执行一次，之后 count 变化再执行
</script>

watchEffect：默认立即执行

组件挂载时会先执行一次（用于收集依赖），之后依赖变化时再执行：

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

const count = ref(0)

// 组件挂载时立即执行一次，之后 count 变化时再执行
watchEffect(() => {
  console.log(`count：${count.value}`)
})
// 输出：count：0（挂载时）→ count：1（当count++时）
</script>

3. 新旧值访问对比

watch：支持访问新旧值

回调函数的第一个参数是新值，第二个参数是旧值（引用类型需注意浅对比）：

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

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`旧值：${oldVal}，新值：${newVal}`) // 例如：旧值：0，新值：1
})

// 监听对象（需注意：默认是浅监听，对象内部属性变化需开启 deep: true）
const user = ref({ name: 'Vue', age: 3 })
watch(user, (newUser, oldUser) => {
  console.log('user变化了', newUser, oldUser)
}, { deep: true }) // 深度监听对象内部属性
</script>

watchEffect：不支持访问旧值

只能访问当前最新的响应式数据，无法获取变化前的值：

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

const count = ref(0)

watchEffect(() => {
  // 只能拿到当前值，拿不到变化前的旧值
  console.log(`当前count：${count.value}`)
})
</script>

三、使用技巧与场景选择

1. 什么时候用watch？

• 需要访问新旧值时（如对比变化前后的数据）；
• 需要明确控制监听源（只监听特定数据，避免无关依赖触发）；
• 需要延迟执行（如使用 flush: 'post' 在 DOM 更新后执行）；
• 需要深度监听对象 / 数组且需要精细控制时；
• 需要懒执行（仅在数据变化时执行，避免初始化开销）。

实用技巧：

• 监听对象单个属性：用函数返回具体属性（避免深度监听整个对象，提升性能）：

  <script setup>
  import { ref, watch } from 'vue'
  
  const user = ref({ name: 'Vue', age: 3 })
  
  // 只监听 user.name，无需深度监听整个对象
  watch(() => user.value.name, (newName) => {
    console.log(`用户名变化：${newName}`)
  })
  </script>
  

• 延迟执行（DOM 更新后）：使用flush: 'post'：

  watch(count, () => {
    // 此时DOM已经更新，可以获取更新后的DOM元素
    console.log(document.getElementById('count').innerText)
  }, { flush: 'post' })
  

2. 什么时候用watchEffect？

• 副作用依赖多个响应式数据，且无需区分哪个变化（自动追踪所有用到的）；
• 需要立即执行副作用（如初始化时请求数据，之后依赖变化重新请求）；
• 不需要访问旧值，只关注当前最新状态；
• 写法简洁优先（减少代码量）。

实用技巧：

• 清除副作用（如取消请求、清除定时器）：使用onInvalidate 回调（组件卸载或副作用重新执行前触发）：

  <script setup>
  import { ref, watchEffect } from 'vue'
  import axios from 'axios'
  
  const id = ref(1)
  
  watchEffect((onInvalidate) => {
    // 发起请求
    const request = axios.get(`/api/data/${id.value}`)
    
    // 清除函数：组件卸载或 id 变化时触发
    onInvalidate(() => {
      request.cancel() // 取消请求
    })
  })
  </script>
  

• 延迟执行（同 watch）：使用flush: 'post'：

  watchEffect(() => {
    // DOM更新后执行
    console.log(document.getElementById('count').innerText)
  }, { flush: 'post' })
  

3. 共同技巧：停止监听

watch和watchEffect都返回一个停止函数，调用后会停止监听（组件卸载时会自动停止，无需手动调用）：

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

const count = ref(0)

// watch 停止监听
const stopWatch = watch(count, (newVal) => {
  console.log(`count：${newVal}`)
})

// watchEffect 停止监听
const stopWatchEffect = watchEffect(() => {
  console.log(`count：${count.value}`)
})

// 手动停止监听（如某个条件满足时）
const stopAll = () => {
  stopWatch()
  stopWatchEffect()
}
</script>

总结

核心区别

1. 依赖追踪：watch显式指定源，watchEffect隐式追踪；
2. 执行时机：watch默认懒执行，watchEffect默认立即执行；
3. 新旧值：watch支持访问新旧值，watchEffect不支持。

场景选择

• 需旧值、明确监听源、精细控制 → 用 watch；
• 多依赖、立即执行、简洁优先 → 用 watchEffect。

关键技巧

1. watch监听对象单个属性时，用函数返回（避免深度监听）；
2. watchEffect需清除副作用时，使用 onInvalidate；
3. 两者都可通过返回的停止函数手动停止监听，组件卸载时自动停止。

到此这篇关于Vue3中watch和watchEffect的区别及使用技巧总结的文章就介绍到这了,更多相关Vue3 watch和watchEffect使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论