Vue3中的computed,watch,watchEffect怎么使用

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

1. computed

computed用于创建一个计算属性，它会根据依赖的响应式数据自动更新。计算属性的值会被缓存，只有当依赖的数据发生变化时，才会重新计算。

基本用法

import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 0

count.value = 1;
console.log(doubleCount.value); // 2

计算属性的setter

计算属性默认是只读的，但你可以通过提供一个setter来使其可写。

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

doubleCount.value = 4;
console.log(count.value); // 2

2. watch

watch用于监听一个或多个响应式数据的变化，并在数据变化时执行回调函数。

基本用法

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});

count.value = 1; // 输出: count changed from 0 to 1

监听多个数据源

你可以通过传递一个数组来监听多个数据源。

const count = ref(0);
const name = ref('Alice');

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count: ${newCount}, name: ${newName}`);
});

count.value = 1; // 输出: count: 1, name: Alice
name.value = 'Bob'; // 输出: count: 1, name: Bob

深度监听

默认情况下，watch是浅层监听的，如果你需要监听对象内部的变化，可以使用deep选项。

const state = ref({ count: 0 });

watch(
  state,
  (newVal, oldVal) => {
    console.log('state changed');
  },
  { deep: true }
);

state.value.count = 1; // 输出: state changed

3. watchEffect

watchEffect是一个立即执行的监听器，它会自动追踪其内部使用的响应式数据，并在数据变化时重新执行。

基本用法

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count is ${count.value}`);
});

count.value = 1; // 输出: count is 1

停止监听

watchEffect返回一个停止监听的函数，你可以在需要时调用它来停止监听。

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

count.value = 1; // 输出: count is 1

stop();

count.value = 2; // 无输出

清理副作用

watchEffect的回调函数可以接收一个onInvalidate参数，用于清理副作用。

watchEffect((onInvalidate) => {
  const timer = setTimeout(() => {
    console.log(`count is ${count.value}`);
  }, 1000);

  onInvalidate(() => {
    clearTimeout(timer);
  });
});

count.value = 1; // 1秒后输出: count is 1
count.value = 2; // 1秒后输出: count is 2

总结

• computed用于创建计算属性，适合处理依赖其他数据的衍生数据。
• watch用于监听数据的变化，适合在数据变化时执行一些副作用操作。
• watchEffect是一个立即执行的监听器，适合在需要自动追踪依赖的场景中使用。

根据不同的需求，选择合适的API可以帮助我们更好地管理Vue应用中的响应式数据。