以下是如何在 Vue 3 中定义和使用计算属性的基本示例：
<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>
在上述示例中：
- 使用 ref 创建一个响应式数据 message。
- 使用 computed 创建一个计算属性 reversedMessage，它依赖于 message，并定义了计算逻辑。这个计算属性会根据 message 的值自动更新。
- 在模板中，通过 {{ message }} 和 {{ reversedMessage }} 使用数据和计算属性。
计算属性的优势在于它们会在依赖的响应式数据发生变化时进行智能缓存，确保只在需要时进行重新计算，提高性能。
需要注意的是，在 Vue 3 中，计算属性的声明方式发生了变化，使用 computed 函数来创建，而不再是 Vue 2 中的对象形式。
转载请注明出处：http://www.zyzy.cn/article/detail/12980/Vue3