Vue3中的watch和computed怎么使用

在Vue3中，watch和computed是两个非常重要的响应式API，它们可以帮助我们更好地管理和响应数据的变化。本文将详细介绍如何在Vue3中使用watch和computed。

1. computed的使用

computed是Vue3中的一个计算属性，它可以根据依赖的数据动态计算出一个新的值。computed属性的值会被缓存，只有当依赖的数据发生变化时，才会重新计算。

1.1 基本用法

import { ref, computed } from 'vue';

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

    // 定义一个计算属性
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount,
    };
  },
};

在上面的例子中，doubleCount是一个计算属性，它依赖于count的值。当count发生变化时，doubleCount会自动重新计算。

1.2 计算属性的setter

computed属性默认只有getter，但也可以定义一个setter，允许你在设置计算属性时执行一些操作。

import { ref, computed } from 'vue';

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

    const doubleCount = computed({
      get: () => count.value * 2,
      set: (newValue) => {
        count.value = newValue / 2;
      },
    });

    return {
      count,
      doubleCount,
    };
  },
};

在这个例子中，doubleCount不仅可以通过count计算出来，还可以通过设置doubleCount来反向更新count的值。

2. watch的使用

watch是Vue3中的一个监听器，它可以监听一个或多个响应式数据的变化，并在数据变化时执行相应的回调函数。

2.1 基本用法

import { ref, watch } from 'vue';

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

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

    return {
      count,
    };
  },
};

在这个例子中，watch监听count的变化，并在count发生变化时执行回调函数。

2.2 监听多个数据

watch可以同时监听多个数据的变化。

import { ref, watch } from 'vue';

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

    // 监听count和name的变化
    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count从${oldCount}变为${newCount}`);
      console.log(`name从${oldName}变为${newName}`);
    });

    return {
      count,
      name,
    };
  },
};

在这个例子中，watch同时监听count和name的变化，并在它们发生变化时执行回调函数。

2.3 深度监听

watch默认是浅层监听，如果监听的是一个对象或数组，对象或数组内部的变化不会被监听到。可以通过设置deep选项来开启深度监听。

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Vue',
      age: 3,
    });

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

    return {
      user,
    };
  },
};

在这个例子中，watch会深度监听user对象的变化，即使user对象的内部属性发生变化，也会触发回调函数。

2.4 立即执行

watch默认不会在初始化时立即执行回调函数，可以通过设置immediate选项来让watch在初始化时立即执行一次回调函数。

import { ref, watch } from 'vue';

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

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

    return {
      count,
    };
  },
};

在这个例子中，watch会在初始化时立即执行一次回调函数。

3. watchEffect的使用

watchEffect是Vue3中的另一个监听器，它会自动追踪回调函数中使用的响应式数据，并在这些数据发生变化时重新执行回调函数。

3.1 基本用法

import { ref, watchEffect } from 'vue';

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

    // 自动追踪count的变化
    watchEffect(() => {
      console.log(`count的值是${count.value}`);
    });

    return {
      count,
    };
  },
};

在这个例子中，watchEffect会自动追踪count的变化，并在count发生变化时重新执行回调函数。

3.2 停止监听

watchEffect返回一个停止监听的函数，可以在需要时手动停止监听。

import { ref, watchEffect } from 'vue';

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

    const stop = watchEffect(() => {
      console.log(`count的值是${count.value}`);
    });

    // 停止监听
    stop();

    return {
      count,
    };
  },
};

在这个例子中，stop函数可以手动停止watchEffect的监听。

4. 总结

• computed用于定义计算属性，它可以根据依赖的数据动态计算出一个新的值，并且具有缓存机制。
• watch用于监听响应式数据的变化，并在数据变化时执行回调函数。它可以监听单个或多个数据，支持深度监听和立即执行。
• watchEffect会自动追踪回调函数中使用的响应式数据，并在这些数据发生变化时重新执行回调函数。

通过合理使用computed、watch和watchEffect，可以更好地管理和响应Vue3应用中的数据变化。