Vue3中的watch详解：掌握响应式侦听的艺术

目录

一、watch的核心作用

二、基础用法（对比Vue2优化）

三、高级配置选项 

四、watch vs watchEffect

五、进阶技巧

六、最佳实践

七、场景示例 

结语

一、watch的核心作用

监听响应式数据的变化，在数据变化时执行回调函数，适用于：

• 执行异步操作（如API请求）

• 复杂逻辑处理

• 数据变化时需要联动多个操作的场景

二、基础用法（对比Vue2优化）

import { ref, watch } from 'vue'

// 1. 侦听ref数据
const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log(`计数变化：${oldVal} → ${newVal}`)
})

// 2. 侦听多个数据源（Vue3新特性）
const name = ref('Alice')
const age = ref(25)

watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
  console.log(`姓名变化：${oldName}→${newName}`)
  console.log(`年龄变化：${oldAge}→${newAge}`)
})

三、高级配置选项 

const user = reactive({ 
  info: { 
    name: 'Bob', 
    contacts: { email: 'bob@test.com' }
  }
})

// 深度监听 + 立即执行
watch(
  () => user.info,  // 使用getter返回对象
  (newInfo) => {
    console.log('邮箱变更:', newInfo.contacts.email)
  },
  {
    deep: true,     // 深度监听嵌套对象
    immediate: true // 组件创建时立即执行
  }
)

四、watch vs watchEffect

// watchEffect示例
const searchQuery = ref('')
watchEffect(() => {
  // 自动追踪searchQuery.value
  fetch(`/api/search?q=${searchQuery.value}`)
})

五、进阶技巧

1. 停止监听器

   const stop = watch(data, callback)
   // 需要时停止监听
   stop()

2. 清除副作用

   watch(idRef, (id, _, onCleanup) => {
     const timer = setTimeout(() => {}, 1000)
     onCleanup(() => clearTimeout(timer)) // 清除上次的定时器
   })

3. 调试钩子

   watch(
     source,
     callback,
     {
       onTrack(e) { debugger }, // 依赖被收集时触发
       onTrigger(e) { debugger } // 依赖变更时触发
     }
   )

    

六、最佳实践

1. 优先使用ref+watch组合处理基础类型

2. 深度监听对象时，考虑使用toRefs解构避免性能损耗

3. 异步操作务必使用清理函数避免内存泄漏

4. 对于简单逻辑，优先考虑computed > watchEffect > watch

性能提示：监听大型数组时，添加{ deep: false }可禁用深度遍历 

七、场景示例 

// 路由参数监听
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(() => route.params.id, (newId) => {
  fetchUser(newId)
})

// 表单验证联动
watch(
  [() => form.username, () => form.email],
  ([username, email]) => {
    isFormValid.value = username.length > 0 && email.includes('@')
  }
)

结语

Vue3的watch通过Composition API实现了更精细的监听控制。关键点：

• 使用() => value语法监听响应式对象属性

• 善用immediate处理初始化逻辑

• 深度监听注意性能影响

• 异步操作必须清理副作用

掌握这些技巧，将使你的Vue应用响应如丝般顺滑！