Vue Composition API架构：页面跳转优先传Props还是API请求？

在Vue项目中，这两种方案各有适用场景，但从长期可维护性、数据一致性和用户体验的角度，有明确的优先级判断：

两种方案的优劣对比 #

1. Props传递完整数据 #

• 优势：
  • 无额外网络请求，页面切换瞬间完成，体验流畅
  • 减少后端请求次数，降低服务端压力
• 劣势：
  • 数据过期风险：如果预览数据加载后，后端数据被其他操作修改，新页面会展示旧内容，引发一致性问题
  • 路由失效：用户刷新页面或分享链接时，因为路由没有存储数据标识，页面会无法加载内容
  • 数据体积限制：如果数据量大，通过Props或隐式路由传参可能导致性能问题，甚至触发浏览器路由参数长度限制

2. 传递ID并重新请求数据 #

• 优势：
  • 数据实时性：每次都拉取最新数据，避免展示过期内容
  • 路由健壮性：ID作为路由参数，支持页面刷新、链接分享，完全符合Web应用的路由设计原则
  • 组件解耦：预览组件和详情页面各自独立，不需要依赖对方的数据结构，后续维护更灵活
• 劣势：
  • 多一次网络请求：会增加后端调用量，需要处理加载状态

最佳实践建议 #

优先选择「传ID重新请求」方案 #

这是Vue生态中路由驱动状态的标准设计思路，也是绝大多数生产级项目的首选：

• 解决了数据一致性和路由可用性的核心问题，这是Web应用的基础要求
• 可以通过**全局状态管理（如Pinia）**做缓存优化：预览组件请求数据后缓存到Store，详情页面先检查缓存，不存在再发起请求，既保证性能又兼顾数据新鲜度

仅在特定场景使用Props传数据 #

如果满足以下所有条件，可以考虑用Props传递：

• 数据是静态或不会被修改的（比如一次性生成的预览卡片，后续无更新）
• 数据体积极小，不会带来性能负担
• 不需要支持页面刷新或链接分享功能

Composition API下的优化实现示例 #

用Pinia做缓存的详情页实现：

<!-- 预览组件 -->
<template>
  <div v-for="item in itemStore.items" @click="goToDetail(item.id)">
    {{ item.title }}
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useItemStore } from '@/stores/item'

const router = useRouter()
const itemStore = useItemStore()

// 假设已在store中缓存了列表数据
const goToDetail = (id) => {
  router.push(`/items/${id}`)
}
</script>

<!-- 详情页组件 -->
<template>
  <div v-if="currentItem">
    <h1>{{ currentItem.title }}</h1>
    <div>{{ currentItem.content }}</div>
  </div>
  <div v-else>加载中...</div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { useItemStore } from '@/stores/item'
import { computed, onMounted } from 'vue'

const route = useRoute()
const itemStore = useItemStore()
const itemId = route.params.id

onMounted(() => {
  // 缓存不存在时才请求
  if (!itemStore.getItem(itemId)) {
    itemStore.fetchItem(itemId)
  }
})

const currentItem = computed(() => itemStore.getItem(itemId))
</script>

内容的提问来源于stack exchange，提问作者Jeremy Kung