Vue 3 中 watch 的使用与深入理解

在 Vue 3 的 Composition API 中,watch 是一个非常强大的工具,用于监听响应式数据的变化并做出相应的处理。本文将通过一段实际代码来深入解析 watch 的行为和使用技巧。


🧩 示例代码回顾

import { reactive, watch } from 'vue'

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})

watch(
  () => {
    console.log(state.a + state.b)
    return state.a + state.b
  },
  (val) => {
    console.log(val * 2)
  }
)

setTimeout(() => {
  state.a++
  //state.b
  state.b--
}, 1000)

🔍 初识 watch

基本结构

Vue 的 watch 函数接收三个参数:

  1. source(监听源):可以是一个响应式引用(如 ref)、一个返回值的 getter 函数、或一个包含多个源的数组。
  2. callback(回调函数):当 source 变化时执行的函数。
  3. options(可选配置):例如 { immediate: true, deep: true }

本例中的逻辑

  • 我们定义了一个响应式对象 state,包含属性 abc
  • 使用 watch 监听 state.a + state.b 的变化,并在变化时打印其两倍值。
  • 在 1 秒后修改ab 的值。

⚙️ 深入分析

1. 初始化阶段

当组件加载时,watch 的第一个函数会被立即调用:

() => {
  console.log(state.a + state.b) // 输出 3
  return state.a + state.b
}

此时 a = 1, b = 2,所以 a + b = 3,控制台输出 3

由于这是第一次运行,还没有发生任何变化,因此不会触发回调 (val) => console.log(val * 2)


2. 修改状态后的行为

1 秒后,执行以下操作:

state.a++ // a = 2
state.b-- // b = 1

此时 a + b = 3,与之前的值相同。

虽然 ab 都发生了变化,但它们的和没有改变,因此 watch 回调 (val) => console.log(val * 2) 不会被触发

但是,下面这行代码仍然会执行:

console.log(state.a + state.b) // 输出 3

这是因为每次依赖项发生变化时,getter 函数都会重新执行一次以检查是否有变化。


📌 控制台输出顺序

  1. 页面加载时:3(来自watch函数体内 console.log
  2. 1 秒后:
    -3(来自watch函数体再次执行)
    • 不会输出 6,因为 a + b 的值没有改变

🧪 如何让watch强制触发?

如果你希望即使值不变也触发回调,可以考虑以下方式:

✅ 使用 immediate: true

watch(
  () => {
    console.log(state.a + state.b)
    return state.a + state.b
  },
  (val) => {
    console.log(val * 2)
  },
  { immediate: true }
)

这样你会看到两次 3和一次 6(在 setTimeout 后)。

注意:deep: true 对基础类型无效,通常用于对象或数组。


💡 实际应用场景

watch 常用于以下场景:

  • 表单验证:监听输入框内容变化
  • 数据同步:当某个值变化时更新其他状态
  • 异步请求:根据用户输入发起搜索请求
  • 路由守卫:监听路由变化并执行相应逻辑

🧠 小结

知识点内容
watch初始执行会执行一次 getter 函数,但不会触发回调
触发回调条件必须是返回值发生变化才会触发
控制台输出即使不触发回调,getter 函数也会重新执行
强制首次触发可使用 { immediate: true }

📚 总结

Vue 3 的watch 提供了灵活的数据监听机制,但它的行为有时可能会让人困惑。理解它的工作原理,尤其是如何判断“变化”,对于编写高效且可维护的响应式逻辑至关重要。

通过上面的例子,我们不仅掌握了watch的基本用法,还了解了它的内部机制以及如何控制其行为。希望这篇文章能帮助你更好地理解和使用 Vue 3 的响应式系统!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值