在 Vue 3 中，watch 和 computed 都是用于处理响应式数据的工具，但它们的功能和应用场景有所不同。

1. computed（计算属性）

computed 用于 派生 数据，它根据其他响应式数据的变化来计算并返回一个值。计算属性会被缓存，直到它依赖的数据发生变化时才会重新计算。

主要特点：

• 缓存：计算属性会自动缓存计算结果，只有当它依赖的数据变化时才会重新计算。
• 声明式：计算属性的计算逻辑是声明式的，你不需要手动管理它的依赖，Vue 会自动管理。
• 适用于复杂计算：如果你需要基于多个响应式数据进行计算，computed 会非常适合。

语法：

import { computed } from 'vue';

const result = computed(() => {
  return expression; // 根据其他响应式数据计算结果
});

使用场景：

• 用于依赖其他响应式数据进行的计算，如从多个值计算一个值。
• 适用于需要高效缓存计算结果的场景。

示例：使用 computed

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      price: 100,
      tax: 0.1
    });

    // 计算属性，根据 price 和 tax 计算总价
    const totalPrice = computed(() => {
      return state.price + state.price * state.tax;
    });

    return { state, totalPrice };
  }
};

在这个例子中，totalPrice 是一个计算属性，它依赖于 state.price 和 state.tax，每当这两个值变化时，totalPrice 会重新计算。

2. watch（侦听器）

watch 用于 观察 响应式数据的变化，并在变化时执行副作用操作。与计算属性不同，watch 不会返回计算值，它更多用于处理副作用（如异步操作、数据请求等）。

主要特点：

• 响应数据变化：watch 监听一个或多个响应式数据，当数据变化时触发回调函数。
• 副作用操作：watch 通常用于执行一些副作用操作，如数据更新、异步请求等。
• 深度监听：可以设置 deep: true 来监听对象的嵌套属性变化。

语法：

import { watch } from 'vue';

watch(
  target,           // 需要监听的响应式数据或计算属性
  (newValue, oldValue) => {
    // 当数据变化时执行的回调
  },
  { immediate: true, deep: true } // 可选配置项
);

使用场景：

• 用于监听单一数据或多个数据的变化，并执行副作用。
• 适用于异步操作、数据请求、或者当某些数据发生变化时需要执行某些行为的场景。

示例：使用 watch

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 监听 count 变化
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};

在这个例子中，我们通过 watch 监听了 count 的变化，当 count 改变时，回调函数会打印出新的值和旧的值。

3. watch 和 computed 的区别

特性	computed	watch
使用目的	用于 计算派生值，依赖于其他响应式数据。	用于 响应数据变化，并在数据变化时执行副作用操作。
返回值	返回一个 计算值，可以在模板中直接使用。	不返回计算值，用于执行副作用（例如异步请求、数据更新）。
性能	缓存：只有在依赖的响应式数据发生变化时才会重新计算。	没有缓存，每次数据变化时都会执行回调。
使用场景	需要基于响应式数据进行计算或组合值的场景。	需要在数据变化时执行副作用操作的场景。
响应数据变化	只有依赖的数据变化时才会重新计算。	每次目标数据变化时都会执行回调。
深度监听	无法直接实现深度监听，需要手动管理嵌套的响应式数据。	可以通过 { deep: true } 选项实现深度监听。

4. computed 与 watch 的使用场景对比

场景	computed	watch
计算派生值	适用于当你需要计算某个值并返回结果（例如，基于多个数据计算一个值）。	不适用，watch 不会返回计算值。
执行副作用（如异步请求）	不适用，computed 是声明式的，仅用于计算。	适用，watch 可用于响应数据变化并执行副作用。
监听复杂对象的变化	适用于当你只关注对象的特定属性时。	适用于深度监听整个对象的变化，尤其是对象的嵌套属性。

5. watch 的高级用法

监听多个数据

你可以使用 watch 来监听多个响应式数据。当其中任何一个数据发生变化时，都会执行回调。

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 监听多个响应式数据
    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`Full name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
    });

    return { firstName, lastName };
  }
};

深度监听

如果你需要监听对象的嵌套属性变化，可以使用 deep: true 配置项来实现深度监听。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const user = reactive({ name: 'Alice', address: { city: 'New York' } });

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

    return { user };
  }
};

总结

• computed 用于计算并返回基于其他响应式数据的派生值，适合用于处理和展示数据。它有缓存机制，只有依赖的数据变化时才会重新计算。
• watch 用于观察响应式数据的变化，并在变化时执行副作用操作，适合用于处理异步任务、执行某些操作或修改其他状态。它没有缓存机制，数据每次变化都会执行回调。