Vue 3 中 watch 的报错解析

🚀 Vue 3 中 watch 的报错解析：一篇搞懂！ 🚀

在 Vue 3 中使用 watch 时，你可能会遇到这样的报错：

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'number | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.

今天我们就来彻底搞懂这个报错的原因，以及如何正确使用 watch！👇

---

1. 报错原因分析

这个报错的核心问题是：watch的第一个参数类型不匹配。

1.1 代码片段

const props = defineProps({
  code: {
    type: Number,
    required: false,
  },
});

watch(props.code, (newValue, oldValue) => {
  // 回调函数
});

1.2 问题出在哪里？

• props.code 的类型是 number | undefined（因为 required: false）。
• watch 的第一个参数期望是一个 响应式对象 或 getter 函数，而不是一个具体的值。

---

2. 为什么watch(() => props.code) 不会报错？

当你使用 () => props.code 时，watch 的第一个参数是一个 getter 函数 ，它会返回 props.code 的值。

• getter 函数的作用：

• • 返回一个响应式值。
  • watch 可以监听这个 getter 函数返回的值的变化。

2.1 正确写法

watch(() => props.code, (newValue, oldValue) => {
  // 回调函数
});

2.2 为什么这样写不会报错？

• () => props.code 是一个函数，返回 props.code 的值。
• watch 可以正确监听 props.code 的变化。

---

3. watch 的正确用法

在 Vue 3 中，watch 的用法有以下几种：

3.1 监听响应式对象

const state = reactive({ count: 0 });

watch(state, (newValue, oldValue) => {
  console.log('state 变化了', newValue, oldValue);
});

3.2 监听 getter 函数

const count = ref(0);

watch(() => count.value, (newValue, oldValue) => {
  console.log('count 变化了', newValue, oldValue);
});

3.3 监听多个源

const count = ref(0);
const name = ref('Alice');

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count 或 name 变化了', newCount, newName);
});

---

4. 为什么props.code 不能直接传给watch ？

• props.code 是一个具体的值（number | undefined），而不是一个响应式对象或 getter 函数。
• watch 的第一个参数需要是一个 响应式对象 或 getter 函数，以便 Vue 能够监听其变化。

---

5. 总结

• 报错原因 ：watch 的第一个参数需要是响应式对象或 getter 函数，而不是具体的值。
• 正确写法 ：使用 () => props.code 作为 watch 的第一个参数。
• 核心思想 ：watch 需要监听的是一个 响应式源，而不是一个具体的值。

---

如果你对 watch 的用法还有疑问，欢迎在评论区讨论！💬