Vue3 如何实现计算属性

在 Vue3 的开发中，计算属性是一个强大且常用的特性，它能有效提升代码的可读性和性能。

计算属性本质上是基于响应式数据的一个缓存函数。当依赖的数据发生变化时，计算属性会重新计算；若依赖数据未变，计算属性会直接返回缓存的结果，而不会重复执行计算逻辑。

要在 Vue3 中实现计算属性，有多种方式。首先是使用 computed 函数。在一个 Vue 组件中，我们可以这样使用：

<template>
  <div>
    <p>原始数据：{{ message }}</p>
    <p>计算后的数据：{{ reversedMessage }}</p>
  </div>
</template>

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

const message = ref('Hello, Vue3');
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});
</script>

在上述代码中，我们定义了一个 ref 类型的 message，然后通过 computed 函数创建了 reversedMessage 计算属性。computed 接收一个回调函数，回调函数内部返回计算后的结果。

另外，如果计算属性需要有可写的功能，也就是既可以获取值，又可以设置值，我们可以使用对象形式的 computed。例如：

<template>
  <div>
    <p>计算属性值：{{ fullName }}</p>
    <button @click="updateFullName">更新全名</button>
  </div>
</template>

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

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';
};
</script>

这里的 fullName 计算属性通过对象形式定义，get 方法用于获取计算后的值，set 方法用于设置新值时执行相应逻辑。

通过合理使用计算属性，不仅能简化模板中的表达式，使代码更清晰，还能提高应用的性能，避免不必要的重复计算。掌握 Vue3 中计算属性的实现方法，是成为优秀 Vue 开发者的重要一步。