Vue 3 的 watch

🚀 Vue 3 的 watch ：结合 ref 和 reactive ，一篇搞懂！ 🚀

在 Vue 3 中，watch 是一个强大的工具，用于监听响应式数据的变化。但你知道如何结合 ref 和 reactive 使用 watch 吗？今天我们就来彻底搞懂这个问题！👇

---

1. watch的基本用法

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

1.1 监听 ref

import { ref, watch } from 'vue';

const count = ref(0);

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

1.2 监听 reactive

import { reactive, watch } from 'vue';

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

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

---

2. ref 和 reactive 使用 watch

2.1 监听 ref 的基本类型

const count = ref(0);

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

2.2 监听 ref 的对象

const user = ref({ name: 'Alice', age: 25 });

watch(user, (newValue, oldValue) => {
  console.log('user 变化了', newValue, oldValue);
}, { deep: true }); // 需要 deep: true 监听对象内部变化

2.3 监听 reactive 的对象

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

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

2.4 监听 reactive 的多个属性

const state = reactive({ count: 0, name: 'Alice' });

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

---

3. watch的高级用法

3.1 立即执行

watch(count, (newValue, oldValue) => {
  console.log('count 变化了', newValue, oldValue);
}, { immediate: true }); // 立即执行回调函数

3.2 深度监听

const state = reactive({ user: { name: 'Alice', age: 25 } });

watch(() => state.user, (newValue, oldValue) => {
  console.log('user 变化了', newValue, oldValue);
}, { deep: true }); // 深度监听对象内部变化

3.3 停止监听

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

stop(); // 停止监听

---

4. 总结

• ref：适合监听基本类型或对象，通过 .value 访问和修改。
• reactive：适合监听复杂对象，直接访问和修改属性。
• watch：可以监听 ref 和 reactive 的变化，支持立即执行、深度监听和停止监听。

---

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