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 函数可以返回任意类型的值（基本类型、对象、数组等）。当需要表示一组相似的动作或配置项时，使用数组是自然且高效的选择，因为：

1. 动态迭代渲染
   数组可以通过 v-for 指令直接遍历，动态生成 UI 元素（如按钮、菜单项等）。
2. 结构化数据
   数组中的每个元素遵循相同的格式（例如 { text, disabled }），便于统一处理逻辑。
3. 响应式依赖
   当数组中的某个属性（如 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 }
]);

选择使用哪种数据结构取决于你的具体需求和应用场景。在需要表示一组相似的项目时，数组是非常自然和方便的选择。