广州网络推广招聘_免费制作ai动画软件_产品推广的渠道有哪些_厦门人才网最新招聘信息网

前言

本文结合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-popoverplacement="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 }
]);

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