vue3怎么定义计算属性

在 Vue 3 中，你可以使用 computed 函数来定义计算属性。computed 函数来自 Vue 3 的组合式 API，它有两种使用方式：只读计算属性和可写计算属性，下面分别介绍这两种方式。

只读计算属性

只读计算属性是最常见的用法，它接收一个 getter 函数作为参数，返回一个只读的响应式引用。以下是一个简单的示例：

<template>
  <div>
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
    <!-- 使用计算属性 -->
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    // 定义响应式数据
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 定义只读计算属性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
});
</script>

在上述代码中：

• 引入 computed 函数。
• 在 setup 函数中，使用 ref 创建响应式数据 firstName 和 lastName。
• 使用 computed 函数定义只读计算属性 fullName，传入一个箭头函数作为 getter，该函数返回 firstName 和 lastName 拼接后的字符串。
• 将 firstName、lastName 和 fullName 返回，以便在模板中使用。

可写计算属性

可写计算属性需要传入一个包含 get 和 set 方法的对象，get 方法用于获取计算属性的值，set 方法用于设置计算属性的值。以下是一个可写计算属性的示例：

<template>
  <div>
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
    <!-- 可写计算属性 -->
    <p>Full name: {{ fullName }}</p>
    <button @click="updateFullName">Update Full Name</button>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 定义可写计算属性
    const fullName = computed({
      get() {
        return `${firstName.value} ${lastName.value}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        firstName.value = names[0];
        lastName.value = names[1];
      }
    });

    const updateFullName = () => {
      fullName.value = 'Jane Smith';
    };

    return {
      firstName,
      lastName,
      fullName,
      updateFullName
    };
  }
});
</script>

在上述代码中：

• 使用 computed 函数传入一个包含 get 和 set 方法的对象来定义可写计算属性 fullName。
• get 方法返回 firstName 和 lastName 拼接后的字符串。
• set 方法接收一个新值，将其按空格分割成两部分，分别赋值给 firstName 和 lastName。
• 定义一个 updateFullName 方法，用于更新 fullName 的值。

通过上述两种方式，你可以在 Vue 3 中灵活地定义计算属性。