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

vue3 计算属性

news 2025/8/6 10:26:35

在 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。