vue3中watch和computed用法

在 Vue 3 中，`watch` 和 `computed` 的用法和 Vue 2 中略有不同。

## watch

### 监听单个响应式数据

在 Vue 3 中，你可以使用 `watch` 函数来监听一个响应式数据的变化。例如：

import { watch } from 'vue';

// 在 setup 函数中使用 watch
setup() {
  const count = ref(0);
  
  watch(count, (newValue, oldValue) => {
    console.log(`count 从 ${oldValue} 变为 ${newValue}`);
  });
  
  return { count };
}

在上面的例子中，我们使用 `watch` 函数监听了 `count` 的变化，并在回调函数中输出了新旧值。

### 监听多个响应式数据

如果需要监听多个响应式数据的变化，你可以传入一个对象，对象的属性名是需要监听的数据，属性值是回调函数。例如：

import { watch, ref } from 'vue';

// 在 setup 函数中使用 watch
setup() {
  const count1 = ref(0);
  const count2 = ref(0);
  
  watch({
    count1: (newValue, oldValue) => {
      console.log(`count1 从 ${oldValue} 变为 ${newValue}`);
    },
    count2: (newValue, oldValue) => {
      console.log(`count2 从 ${oldValue} 变为 ${newValue}`);
    }
  });
  
  return { count1, count2 };
}

### 监听非响应式数据

如果需要监听非响应式数据的变化，你可以使用 `watchEffect` 函数。例如：

import { watchEffect } from 'vue';

// 在 setup 函数中使用 watchEffect
setup() {
  let count = 0;
  
  watchEffect(() => {
    console.log(`count 变为 ${count}`);
  });
  
  return { count };
}

## computed

在 Vue 3 中，你可以使用 `computed` 函数来创建计算属性。例如：

import { computed, ref } from 'vue';

// 在 setup 函数中使用 computed
setup() {
  const count = ref(0);
  
  const doubleCount = computed(() => {
    return count.value * 2;
  });
  
  return { count, doubleCount };
}

在上面的例子中，我们创建了一个计算属性 `doubleCount`，它的值是 `count` 的两倍。当 `count` 改变时，`doubleCount` 也会自动更新。

需要注意的是，计算属性的返回值必须是一个响应式数据。如果返回的是普通数据，那么计算属性就没有意义了。