本文介绍在 Vue 3 + Pinia 场景下，如何通过 computed 与 storeToRefs 高效、响应式地从对象数组中提取匹配项的值（如按学年获取对应校车路线），替代手动遍历函数，兼顾性能、可维护性与代码简洁性。
本文介绍在 vue 3 + pinia 场景下，如何通过 `computed` 与 `storetorefs` 高效、响应式地从对象数组中提取匹配项的值（如按学年获取对应校车路线），替代手动遍历函数，兼顾性能、可维护性与代码简洁性。
在 Vue 3 应用中，当需要根据用户选择（如学年）动态筛选并展示关联数据（如校车路线列表）时，直接在模板中调用普通函数（如 getList('2023-2024')）存在明显缺陷：每次组件重渲染都会重复执行遍历逻辑，且无法自动响应 selectedSchoolyear 的变化，违背响应式设计原则。
✅ 推荐方案：使用 computed 实现响应式筛选computed 属性会基于其依赖（如 selectedSchoolYear 和 routeStore.routes）自动缓存结果，并仅在依赖变更时重新计算，显著提升性能与可预测性。以下是优化后的核心实现：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
<script setup>
import { ref, computed } from 'vue'
import { useRouteStore } from '@/stores/RouteStore'
import { storeToRefs } from 'pinia'
const routeStore = useRouteStore()
const { routes } = storeToRefs(routeStore) // 保持响应式引用
// 提取所有学年作为下拉选项
const schoolYears = computed(() => routes.value.map(r => r.schoolyear))
// 响应式获取当前选中学年的路线列表
const selectedSchoolYear = ref(schoolYears.value[0])
const routesInSelectedYear = computed(() => {
const match = routes.value.find(r => r.schoolyear === selectedSchoolYear.value)
return match?.routeList ?? []
})
// 绑定到 v-select
</script>
<template>
<v-select
v-model="selectedSchoolYear"
:items="schoolYears"
label="学年"
@update:model-value="selectedRoute = null"
/>
<v-select
v-model="selectedRoute"
:items="routesInSelectedYear"
:disabled="routesInSelectedYear.length === 0"
label="校车路线"
/>
</template>? 进阶优化：利用 v-select 的 return-object 能力
若业务允许用户直接操作数据对象（而非仅字符串值），可进一步简化逻辑——让第一个 <v-select></v-select> 直接返回匹配的完整对象，第二个 <v-select></v-select> 直接绑定其 routeList 属性：
<script setup>
import { ref } from 'vue'
import { useRouteStore } from '@/stores/RouteStore'
import { storeToRefs } from 'pinia'
const routeStore = useRouteStore()
const { routes } = storeToRefs(routeStore)
// 默认选中第一条记录
const selectedRouteData = ref(routes.value[0])
const selectedRoute = ref()
</script>
<template>
<v-select
v-model="selectedRouteData"
:items="routes"
item-title="schoolyear"
item-value="schoolyear"
return-object
label="学年"
@update:model-value="selectedRoute = null"
/>
<v-select
v-model="selectedRoute"
:items="selectedRouteData?.routeList || []"
:disabled="!selectedRouteData"
label="校车路线"
/>
</template>⚠️ 关键注意事项
-
避免在
computed中访问this：原代码中this.routeStore在<script setup></script>中不可用，应直接解构useRouteStore()实例； -
空值安全处理：使用可选链
?.与空值合并?? []防止undefined导致渲染错误； -
Pinia 数据响应式：务必通过
storeToRefs()或toRef()解构 store state，确保响应式同步； -
不要在模板中调用函数：
getList(...)类函数会破坏响应式追踪，应由computed替代。
? 总结
相比手动 for 循环，computed + Array.prototype.find() 是更符合 Vue 3 响应式范式的解决方案。它不仅代码更简洁（1 行核心逻辑）、性能更优（惰性求值+缓存），还天然支持依赖追踪与自动更新。结合 v-select 的 return-object 特性，甚至可消除中间状态映射，实现更直观的数据流管理。
