Vue3中computed计算属性的高级玩法
目录
Vue3中computed计算属性的高级玩法
前言
本文结合vant组件库，项目开发所总结下来的知识点。告诉大家有这么个技巧。
一、computed的基本用法
<script setup lang="ts">
import {ref,computed} from 'vue'
const arr = ref([2,4,5,6,7,8,9,10])
// 执行computed函数，return之后计算后的值
const conputedArr = computed(() => {
return arr.value.filter(item => item >= 2)
})
// 结果就会返回数组中大于2的元素
</script>二、实战
1.结合vant组件库的Popover 气泡弹出框
我的组件代码
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { OrderItem } from '@/types/order'
const props = defineProps<{ item: OrderItem }>()
const showPopover = ref(false)
const actions = computed(() => [
{ text: '查看处方', disabled: !props.item.prescriptionId },
{ text: '删除订单' }
])
const onSelect = () => {
//
}
</script>
<template>
<div class="foot" v-if="item.status === OrderType.ConsultComplete">
<div class="more">
<van-popover
placement="top-start"
v-model:show="showPopover"
:actions="actions"
@select="onSelect"
>
<template #reference> 更多 </template>
</van-popover>
</div>
</div>
</template>
<style>
.....
</style>很多小伙伴很疑惑为啥这里computed语法可以这样写
// 计算多个值
computed(() =>[
{...},
{...}
])2.解释
Vue 3 组合式 API 中
computed
返回数组的使用场景与原理
为什么使用数组？
在 Vue 3 的组合式 API 中，
computed
函数可以返回
任意类型
的值（基本类型、对象、数组等）。当需要表示
一组相似的动作或配置项
时，使用数组是自然且高效的选择，因为：
动态迭代渲染
数组可以通过
v-for指令直接遍历，动态生成 UI 元素（如按钮、菜单项等）。结构化数据
数组中的每个元素遵循相同的格式（例如
{ text, disabled }），便于统一处理逻辑。响应式依赖
当数组中的某个属性（如
disabled）依赖响应式数据时，computed会自动追踪变化并更新。
示例代码分析
const actions = computed(() => [
{ text: '查看处方', disabled: !props.item.prescriptionId },
{ text: '删除订单' }
]);解释：
**数组元素：每个对象描述一个动作的配置（如按钮的文本和禁用状态）。
响应式逻辑：disabled 的值依赖 props.item.prescriptionId，当该值变化时，计算属性会重新计算。
默认行为：未显式定义 disabled 的动作默认为 false（即不禁用）。**
总结
其他数据结构的对比
1. 使用对象
- 适用于单个动作的场景：
const singleAction = computed(() => ({
text: '查看处方',
disabled: !props.item.prescriptionId
}));2. 使用数组
- 适用于多个动作的场景：
const actions = computed(() => [
{ text: '动作1', disabled: false },
{ text: '动作2', disabled: true }
]);选择使用哪种数据结构取决于你的具体需求和应用场景。在需要表示一组相似的项目时，数组是非常自然和方便的选择。