Vue 3 Watch：OPTIONS API 与 COMPOSITION API 对比指南

前言

在 Vue 3 中，watch API 经过了重构，它现在可以用于监听响应式数据、响应式函数和响应式对象，并支持深度观察、立即执行、惰性执行等功能。此外，Vue 3 还引入了一个新的 API——watchEffect，它可以用于监听计算属性和侦听器。

watch API

Options API

在 Options API 中，watch API 的使用方法与之前版本相同，它可以放在组件的 watch 选项中，例如：

export default {
  watch: {
    count: {
      handler(newValue, oldValue) {
        // 对 count 的变化进行响应
      },
      deep: true, // 深度观察
      immediate: true, // 立即执行
    },
  },
};

Composition API

在 Composition API 中，watch API 的使用方法与 Options API 不同，它需要使用 watch() 函数，例如：

import { watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      // 对 count 的变化进行响应
    }, {
      deep: true, // 深度观察
      immediate: true, // 立即执行
    });

    return {
      count,
    };
  },
};

watchEffect API

在 Composition API 中，watchEffect API 可以用于监听计算属性和侦听器，例如：

import { watchEffect } from 'vue';

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

    watchEffect(() => {
      // 对 count 的变化进行响应
    });

    return {
      count,
    };
  },
};

性能优化

在使用 watch 和 watchEffect API 时，需要考虑性能优化，以下是一些建议：

• 避免在组件中使用过多的 watch 和 watchEffect，因为这可能会导致性能问题。
• 对于不需要立即执行的 watch，可以将 immediate 选项设置为 false。
• 对于不需要深度观察的 watch，可以将 deep 选项设置为 false。
• 对于只需要监听计算属性或侦听器的 watch，可以使用 watchEffect API。

总结

在 Vue 3 中，watch 和 watchEffect API 为我们提供了强大的响应式编程能力，我们可以使用它们来轻松地监听响应式数据、响应式函数、响应式对象、计算属性和侦听器的变化，并做出相应的响应。