Vue3中computed计算属性的全面用法（简单易懂，一篇就会）

在Vue3中，计算属性(computed properties)是依赖于响应式数据进行的值的封装。计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。

1. 基本用法

<template>
  <div>{{ reversedMessage }}</div>
</template>
 
<script>
import { computed, ref } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello');
    const reversedMessage = computed(() => message.value.split('').reverse().join(''));
 
    return {
      message,
      reversedMessage
    };
  }
};
</script>

在这个例子中，reversedMessage是一个计算属性，它的返回值取决于message的值。当message改变时，reversedMessage会自动更新。

2. 设置setter

计算属性默认只有getter，但你也可以提供一个setter来使计算属性变为可响应。

<template>
  <div>{{ fullName }}</div>
  <button @click="fullName = 'John Doe'">Change Name</button>
</template>
 
<script>
import { computed, ref } from 'vue';
 
export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    const fullName = computed({
      get: () => firstName.value + ' ' + lastName.value,
      set: (value) => {
        const names = value.split(' ');
        firstName.value = names[0];
        lastName.value = names[names.length - 1];
      }
    });
 
    return {
      firstName,
      lastName,
      fullName
    };
  }
};
</script>

在这个例子中，fullName既有getter也有setter，当你点击按钮改变fullName的值时，它会自动把这个新值分割成firstName和lastName。

3. 使用computed的getter和setter函数

你也可以使用函数的形式来定义getter和setter。

<template>
  <div>{{ fullName }}</div>
  <button @click="changeName('John', 'Doe')">Change Name</button>
</template>
 
<script>
import { computed, ref } from 'vue';
 
export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');
    const fullName = computed({
      get: () => firstName.value + ' ' + lastName.value,
      set: (first, last) => {
        firstName.value = first;
        lastName.value = last;
      }
    });
 
    function changeName(first, last) {
      fullName.value = first + ' ' + last;
    }
 
    return {
      fullName,
      changeName
    };
  }
};
</script>

在这个例子中，changeName函数接受first和last两个参数，然后通过设置fullName来改变firstName和lastName的值。

4. 使用watchEffect和watch来响应计算属性的变化

<template>
  <div>{{ computedValue }}</div>
</template>
 
<script>
import { computed, ref, watchEffect, watch } from 'vue';
 
export default {
  setup() {
    const value = ref(0);
    const computedValue =