vue3 计算属性

在 Vue 3 中，计算属性（computed properties）是一种基于它们的响应式依赖进行缓存的计算值。计算属性主要用于在模板中声明式地声明依赖其他属性的计算值。它们只在相关响应式依赖发生改变时才会重新计算。

创建计算属性

在 Vue 3 中，你可以使用 Vue.computed 方法来创建一个计算属性。这个方法接受一个 getter 函数作为参数，并返回一个响应式的 ref 对象，你可以通过 .value 属性访问计算结果。

示例

假设你有一个组件，其中包含一些响应式状态和一些基于这些状态的计算值。

<script setup>
import { ref, computed } from 'vue';
 
const firstName = ref('John');
const lastName = ref('Doe');
 
// 创建一个计算属性
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});
</script>
 
<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。每当 firstName 或 lastName 改变时，fullName 都会自动更新。

可写的计算属性

Vue 3 还支持可写的计算属性，这意味着你可以在计算属性中设置一个 setter 函数。这样，当计算属性的值被设置时，setter 函数会被调用。

<script setup>
import { ref, computed } from 'vue';
 
const firstName = ref('John');
const lastName = ref('Doe');
 
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
});
</script>

在这个例子中，当你尝试修改 fullName 时（例如，在模板中绑定到一个输入并修改它），setter 函数会被调用，从而更新 firstName 和 lastName。

使用 Composition API 的优势

在 Vue 3 中，推荐使用 Composition API 来组织和重用逻辑，其中 setup() 函数和 <script setup> 是主要方式。这使得代码更加模块化和易于理解。计算属性在这种模式下依然强大且易于使用。

通过上述示例，你应该能够理解如何在 Vue 3 中创建和使用计算属性，无论是只读的还是可写的。这些功能对于构建响应式和高效的应用程序至关重要。