在 Vue 3 中，watch 和 computed 是两个重要的响应式 API，分别用于监听数据变化并执行副作用，以及创建基于其他响应式数据的计算属性。下面是它们的具体使用方式：

watch 的使用

watch 用于监听一个或多个响应式数据的变化，并在发生变化时执行一个回调函数。它通常用于执行副作用，如异步请求、数据验证或其他不能通过计算属性实现的逻辑。

基本用法

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    // 修改 count 的值将触发 watch
    count.value = 5; // 控制台输出: Count changed from 0 to 5

    return {
      count
    };
  }
};

监听多个数据源

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(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

深度监听

import { reactive, watch } from 'vue';

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

    watch(user, (newValue, oldValue) => {
      console.log('User object changed:', newValue);
    }, { deep: true });

    return {
      user
    };
  }
};

立即执行

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }, { immediate: true });

    return {
      count
    };
  }
};

computed 的使用

computed 用于创建计算属性，它的值基于其他响应式数据动态计算。计算属性会根据依赖的变化自动更新，并且具备缓存机制，只有当依赖的数据发生变化时，计算属性才会重新计算。

基本用法

import { ref, computed } from 'vue';

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

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
};

计算属性的依赖

计算属性会自动追踪它依赖的响应式数据，只有依赖的数据发生变化时，计算属性才会重新计算。

import { ref, computed } from 'vue';

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

    const doubled = computed(() => count.value * 2);

    return {
      count,
      doubled
    };
  }
};

读写计算属性

计算属性不仅可以用作只读属性，还可以定义 getter 和 setter 使其可写。

import { ref, computed } from 'vue';

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

    const fullName = computed({
      get() {
        return `${firstName.value} ${lastName.value}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        firstName.value = names[0];
        lastName.value = names[1];
      }
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
};

总结

• watch:

  • 适合处理副作用（如异步请求、手动操作 DOM）。
  • 可用于监听多个数据源和深度变化。
  • 提供了 immediate 选项，允许在监听开始时立即执行回调。

• computed:

  • 适合处理基于其他响应式数据的计算和派生状态。
  • 具备缓存机制，性能优化。
  • 可以是只读的，也可以定义可写的 getter/setter。

watch 和 computed 是 Vue 3 中强大的工具，分别用于响应式数据的副作用处理和派生状态的自动计算。根据场景需要选择合适的工具可以让你的应用更高效、更易维护。