Vue 3 中的计算属性（Computed Properties）

计算属性是 Vue 中非常重要的一个特性，它允许你基于现有的响应式数据动态计算出新的值。计算属性在 Vue 2 和 Vue 3 中都有广泛的应用，但在 Vue 3 中，计算属性的使用方式更加灵活和强大。接下来，我们将详细学习如何在 Vue 3 中使用计算属性，并理解其背后的原理。

一、计算属性的基本使用

（一）需求

假设我们有一个表单，用户可以输入姓和名，我们需要动态计算出全名。如果直接在模板中写逻辑，代码会变得复杂且难以维护。计算属性可以帮助我们解决这个问题。

（二）示例代码

HTML复制

<template>
  <div>
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});
</script>

（三）解释

1. 定义响应式数据：使用 ref 定义 firstName 和 lastName。

2. 引入计算属性import { ref, computed } from 'vue';：使用 computed 定义 fullName，它是一个计算属性。

3. 模板中的使用：在模板中直接使用 fullName，Vue 会自动处理。

这里要解释一下v-model，v-model可以实现数据的双向绑定，即用户在表单中输入的内容会自动更新到数据中，同时数据的变化也会自动反映到表单中。

二、计算属性的特点

（一）缓存机制

面试官问你，方法和计算属性有什么不同？

回答他，计算属性具有缓存机制，而方法是没有缓存机制的，每次调用都会重新计算。

当计算属性所依赖的数据没有变化时，它不会重新计算，而是直接使用缓存的结果。这使得计算属性比普通方法更高效。

（二）示例代码

HTML复制

<template>
  <div>
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed(() => {
  console.log('计算全名');
  return `${firstName.value} ${lastName.value}`;
});
</script>

（三）解释

1. 缓存机制：当 firstName 和 lastName 没有变化时，fullName 不会重新计算。

2. 控制台输出：只有当 firstName 或 lastName 发生变化时，控制台才会输出“计算全名”。

三、问题：计算属性默认是只读的，怎么修改计算属性的值呢？

这就是计算属性的读写了

（一）只读计算属性

默认情况下，计算属性是只读的。你不能直接修改计算属性的值。

（二）可读写计算属性

如果需要修改计算属性的值，可以通过定义 getter 和 setter 来实现。

（三）示例代码

HTML复制

<template>
  <div>
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
    <button @click="changeFullName">修改全名为 李四</button>
  </div>
</template>

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

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    const [newFirstName, newLastName] = newValue.split(' ');
    firstName.value = newFirstName;
    lastName.value = newLastName;
  }
});

const changeFullName = () => {
  fullName.value = '李 四';
};
</script>

（四）解释

1. getter：定义了如何计算 fullName。

2. setter：定义了如何修改 fullName。

3. 修改全名：通过 changeFullName 方法修改 fullName，触发 setter。

四、计算属性与方法的区别

（一）计算属性

• 缓存机制：计算属性有缓存，只有依赖的数据变化时才会重新计算。

• 使用方式：直接在模板中使用，不需要手动调用。

（二）方法

• 无缓存：方法没有缓存，每次调用都会重新执行。

• 使用方式：需要手动调用，例如 method()。

（三）示例代码

HTML复制

<template>
  <div>
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
    <p>全名（方法）：{{ getFullName() }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

const getFullName = () => {
  return `${firstName.value} ${lastName.value}`;
};
</script>

（四）解释

1. 计算属性：fullName 只在依赖的数据变化时重新计算。

2. 方法：getFullName 每次调用都会重新执行。

五、总结

（一）计算属性的特点

• 缓存机制：计算属性有缓存，只有依赖的数据变化时才会重新计算。

• 只读与可读写：默认情况下，计算属性是只读的，但可以通过定义 getter 和 setter 实现可读写。

（二）使用场景

• 简化模板逻辑：计算属性可以将复杂的逻辑封装起来，使模板保持简洁。

• 性能优化：计算属性的缓存机制使其比普通方法更高效。

（三）代码示例

HTML复制

<template>
  <div>
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
    <button @click="changeFullName">修改全名为 李四</button>
  </div>
</template>

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

const firstName = ref('张');
const lastName = ref('三');

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    const [newFirstName, newLastName] = newValue.split(' ');
    firstName.value = newFirstName;
    lastName.value = newLastName;
  }
});

const changeFullName = () => {
  fullName.value = '李 四';
};
</script>

通过上述内容，你可以更好地理解和使用 Vue 3 中的计算属性。在实际开发中，计算属性可以帮助你简化模板逻辑，提高代码的可维护性和性能。