当前位置：首页 > article >正文

Vue 3 中可读可写的计算属性（Computed Properties）的使用场景

article 2025/2/25 5:54:04

在 Vue 3 中，计算属性（Computed Properties）是一种基于响应式依赖进行缓存的属性。它们通常用于处理复杂的逻辑，并且只有当依赖的响应式数据发生变化时，才会重新计算。计算属性非常适合用于处理模板中的复杂表达式，使得代码更加简洁和可维护。

基本用法

在 Vue 3 中，你可以使用 computed 函数来定义计算属性。computed 函数接受一个 getter 函数，并返回一个不可变的 ref 对象。

<template>
  <div>
    <p>原始消息: {{ message }}</p>
    <p>反转后的消息: {{ reversedMessage }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    // 计算属性
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    return {
      message,
      reversedMessage,
    };
  },
};
</script>

计算属性的缓存

计算属性是基于它们的响应式依赖进行缓存的。只有当依赖的响应式数据发生变化时，计算属性才会重新计算。这意味着如果依赖的数据没有变化，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑。

可写的计算属性

默认情况下，计算属性是只读的。如果你需要创建一个可写的计算属性，你可以提供一个包含 get 和 set 函数的对象。

<template>
  <div>
    <p>名字: {{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name" />
    <input v-model="lastName" placeholder="Last Name" />
  </div>
</template>

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

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

    // 可写的计算属性
    const fullName = computed({
      get() {
        return `${firstName.value} ${lastName.value}`;
      },
      set(newValue) {
        const [first, last] = newValue.split(' ');
        firstName.value = first;
        lastName.value = last;
      },
    });

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

在这个例子中，fullName 是一个可写的计算属性。当你修改 fullName 时，firstName 和 lastName 也会相应地更新。

计算属性的依赖

计算属性会自动追踪它们的依赖。如果计算属性依赖于某个响应式数据，当这个数据发生变化时，计算属性会自动重新计算。

<template>
  <div>
    <p>数量: {{ quantity }}</p>
    <p>单价: {{ price }}</p>
    <p>总价: {{ totalPrice }}</p>
    <button @click="increaseQuantity">增加数量</button>
  </div>
</template>

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

export default {
  setup() {
    const quantity = ref(2);
    const price = ref(10);

    // 计算属性
    const totalPrice = computed(() => {
      return quantity.value * price.value;
    });

    const increaseQuantity = () => {
      quantity.value++;
    };

    return {
      quantity,
      price,
      totalPrice,
      increaseQuantity,
    };
  },
};
</script>