watch方法解析

watch 方法解释

在 Vue.js 中，watch 是一个用于监听响应式数据变化的 API。当被监听的数据发生变化时，watch 会执行指定的回调函数。它非常适合处理需要在数据变化时执行某些逻辑的场景。

---

watch 的基本语法

watch(source, callback, options)

• source ：需要监听的响应式数据。可以是一个 ref、reactive 对象、计算属性，或者一个返回值的函数。
• callback ：当 source 发生变化时执行的回调函数。它接收两个参数：
  • newValue：变化后的新值。
  • oldValue：变化前的旧值。
• options ：可选的配置对象，常用属性包括：
  • immediate：是否在监听开始时立即执行回调函数。
  • deep：是否深度监听对象或数组内部的变化。

---

watch 的示例

1. 监听 ref 的变化

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});

count.value++; // 输出：count 从 0 变为 1

---

2. 监听 reactive 对象的变化

import { reactive, watch } from 'vue';

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

watch(
  () => user.name, // 监听 user.name
  (newValue, oldValue) => {
    console.log(`用户名从 ${oldValue} 变为 ${newValue}`);
  }
);

user.name = 'Bob'; // 输出：用户名从 Alice 变为 Bob

---

3. 监听多个数据的变化

import { ref, watch } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

watch(
  [firstName, lastName], // 监听多个数据
  ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
    console.log(`姓名从 ${oldFirstName} ${oldLastName} 变为 ${newFirstName} ${newLastName}`);
  }
);

firstName.value = 'Jane'; // 输出：姓名从 John Doe 变为 Jane Doe

---

4. 深度监听对象或数组

import { reactive, watch } from 'vue';

const user = reactive({ name: 'Alice', address: { city: 'Beijing' } });

watch(
  () => user, // 监听整个 user 对象
  (newValue, oldValue) => {
    console.log('user 对象发生变化', newValue);
  },
  { deep: true } // 深度监听
);

user.address.city = 'Shanghai'; // 输出：user 对象发生变化 { name: 'Alice', address: { city: 'Shanghai' } }

---

5. 立即执行回调

import { ref, watch } from 'vue';

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    console.log(`count 从 ${oldValue} 变为 ${newValue}`);
  },
  { immediate: true } // 立即执行回调
);

// 输出：count 从 undefined 变为 0

---

watch 的使用场景

1. 数据变化时执行异步操作：例如监听搜索关键字的变化，触发搜索请求。
2. 数据变化时更新其他状态：例如监听表单字段的变化，更新表单的验证状态。
3. 深度监听复杂对象：例如监听一个嵌套对象或数组的变化，执行相应的逻辑。

---

总结

• watch 是 Vue.js 中用于监听响应式数据变化的核心 API。
• 它可以监听 ref、reactive、计算属性等数据的变化，并执行相应的逻辑。
• 通过 immediate 和 deep 选项，可以控制监听的行为。
• 在组件开发中，watch 常用于处理数据变化时的异步操作、状态更新等场景。