Vue 3 中的计算属性：只读与可读写的使用与案例

在 Vue 3 中，计算属性（Computed Properties）是一种强大的工具，它允许我们根据响应式数据动态计算并返回一个新的值。计算属性具有缓存机制，只有当依赖的响应式数据发生变化时，才会重新计算。本文将详细介绍 Vue 3 中计算属性的使用，并通过只读和可读写两种案例来演示其实际应用。本文将使用 <script setup> 语法，这是 Vue 3 中推荐的一种更简洁的写法。

1. 计算属性的基本概念

计算属性是通过 computed 函数创建的，它接收一个 getter 函数作为参数，并返回一个只读的 ref 对象。如果需要创建一个可读写的计算属性，可以传入一个包含 get 和 set 函数的对象。

1.1 只读计算属性

只读计算属性是最常见的用法，它根据依赖的响应式数据动态计算并返回一个值。

import { ref, computed } from 'vue';

const count = ref(0);

// 只读计算属性
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 0
count.value = 5;
console.log(doubleCount.value); // 10

1.2 可读写计算属性

可读写计算属性允许我们在读取和写入时执行自定义逻辑。它通过传入一个包含 get 和 set 函数的对象来实现。

import { ref, computed } from 'vue';

const count = ref(0);

// 可读写计算属性
const doubleCount = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

console.log(doubleCount.value); // 0
doubleCount.value = 10; // 设置 doubleCount 的值
console.log(count.value); // 5

2. 只读计算属性案例：老师信息

假设我们有一个老师的信息对象，包含姓名、年龄和教授的课程。我们可以使用只读计算属性来动态计算老师的教龄。

2.1 代码示例

<template>
  <div>
    <h2>老师信息</h2>
    <p>姓名: {{ teacher.name }}</p>
    <p>年龄: {{ teacher.age }}</p>
    <p>教龄: {{ teachingYears }}</p>
    <p>课程: {{ teacher.course }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';

// 定义老师信息的响应式对象
const teacher = reactive({
  name: '张老师',
  age: 40,
  course: '数学'
});

// 只读计算属性：计算教龄
const teachingYears = computed(() => teacher.age - 22);
</script>

2.2 代码解析

响应式对象：
- 使用 reactive 创建了一个包含老师信息的响应式对象 teacher。
只读计算属性：
- 使用 computed 创建了一个只读计算属性 teachingYears，它根据 teacher.age 动态计算教龄。
模板中使用：
- 在模板中直接使用 teachingYears，它会随着 teacher.age 的变化自动更新。

3. 可读写计算属性案例：老师信息

假设我们需要允许用户修改老师的教龄，并自动更新老师的年龄。我们可以使用可读写计算属性来实现这一功能。

3.1 代码示例

<template>
  <div>
    <h2>老师信息</h2>
    <p>姓名: {{ teacher.name }}</p>
    <p>年龄: {{ teacher.age }}</p>
    <p>教龄: <input v-model="teachingYears" /></p>
    <p>课程: {{ teacher.course }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';

// 定义老师信息的响应式对象
const teacher = reactive({
  name: '张老师',
  age: 40,
  course: '数学'
});

// 可读写计算属性：教龄
const teachingYears = computed({
  get: () => teacher.age - 22,
  set: (newValue) => {
    teacher.age = newValue + 22;
  }
});
</script>

3.2 代码解析

响应式对象：
- 使用 reactive 创建了一个包含老师信息的响应式对象 teacher。
可读写计算属性：
- 使用 computed 创建了一个可读写计算属性 teachingYears。
- get 函数根据 teacher.age 计算教龄。
- set 函数根据用户输入的教龄更新 teacher.age。
双向绑定：
- 在模板中使用 v-model 绑定 teachingYears，用户可以通过输入框修改教龄。
- 修改教龄后，teacher.age 会自动更新，并触发视图重新渲染。

4. 总结

只读计算属性：
- 适用于根据响应式数据动态计算并返回一个值的场景。
- 通过 computed 函数传入 getter 函数实现。
可读写计算属性：
- 适用于需要在读取和写入时执行自定义逻辑的场景。
- 通过 computed 函数传入包含 get 和 set 函数的对象实现。
<script setup> 语法：
- 使用 <script setup> 语法可以让代码更简洁，减少模板和逻辑之间的切换。
- 适合在 Vue 3 项目中广泛使用。