技术栈：vue3+uniapp+ts

onLoad ： 发起接口请求的首选位置，页面加载时触发，且只触发一次。

onLoad 推荐原因：

1、只执行一次，避免重复请求

2、能接收上个页面传递的参数（如详情页的 ID）

3、适合获取页面初始化需要的数据

示例：

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const dataList = ref([])

// 在 onLoad 中请求接口
onLoad((options) => {
  // options 包含上个页面传递的参数
  console.log('页面参数：', options)
  
  // 发起接口请求
  fetchData()
})

const fetchData = async () => {
  const res = await uni.request({
    url: '/api/data',
    method: 'GET'
  })
  dataList.value = res.data
}
</script>

onShow：在每次页面显示时都会触发，非常适合需要实时刷新数据或同步状态的场景。

适用场景：

1、订单列表/支付结果页：用户支付后从支付页面返回，需要立即刷新订单状态。

2、个人中心/用户资料页：用户可能在设置页修改了头像、昵称等，返回时需要刷新显示。

3、购物车页：用户可能在其他页面增减商品，返回购物车时需要更新数量和总价。

4、消息/通知列表：收到新消息推送后，切换到消息页需要显示最新内容。

5、表单编辑页返回列表页：从编辑页返回列表页时，需要刷新列表数据。

6、需要实时同步状态的页面：如登录状态、会员等级、余额等变化频繁的数据。

7、扫码/拍照后返回：扫码页面返回后需要处理结果。

示例：

1、订单/支付结果页：用户支付后从支付页面返回，需要立即刷新订单状态。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const orderStatus = ref('')

onShow(() => {
  // 每次显示都查询最新订单状态
  checkOrderStatus()
})

const checkOrderStatus = async () => {
  const res = await uni.request({
    url: '/api/order/status',
    data: { orderId: '123456' }
  })
  orderStatus.value = res.data.status
  
  if (orderStatus.value === 'paid') {
    uni.showToast({ title: '支付成功' })
  }
}
</script>


2、个人中心/用户资料页：用户可能在设置页修改了头像、昵称等，返回时需要刷新显示。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const userInfo = ref({
  avatar: '',
  nickname: '',
  level: 0
})

onShow(() => {
  // 每次返回个人中心都获取最新用户信息
  getUserInfo()
})

const getUserInfo = async () => {
  const res = await uni.request({
    url: '/api/user/info'
  })
  userInfo.value = res.data
}
</script>


3、购物车页面：用户可能在其他页面增减商品，返回购物车时需要更新数量和总价。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const cartList = ref([])
const totalPrice = ref(0)

onShow(() => {
  // 每次显示购物车都重新获取最新数据
  getCartData()
})

const getCartData = async () => {
  const res = await uni.request({
    url: '/api/cart/list'
  })
  cartList.value = res.data.list
  totalPrice.value = res.data.total
}
</script>


4、消息/通知列表：收到新消息推送后，切换到消息页需要显示最新内容。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const messageList = ref([])
const unreadCount = ref(0)

onShow(() => {
  // 每次进入消息页刷新未读消息
  getMessageList()
})

const getMessageList = async () => {
  const res = await uni.request({
    url: '/api/messages'
  })
  messageList.value = res.data.list
  unreadCount.value = res.data.unread
}
</script>


5、表单编辑页返回列表页：从编辑页返回列表页时，需要刷新列表数据。
示例：
<!-- 列表页 -->
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const articleList = ref([])

onShow(() => {
  // 从新增/编辑页返回时刷新列表
  getArticleList()
})

const getArticleList = async () => {
  const res = await uni.request({
    url: '/api/articles'
  })
  articleList.value = res.data
}
</script>

6、需要实时同步状态的页面：如登录状态、会员等级、余额等变化频繁的数据。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const isLogin = ref(false)
const balance = ref(0)

onShow(() => {
  // 检查登录状态和账户余额
  checkLoginStatus()
  getBalance()
})

const checkLoginStatus = () => {
  const token = uni.getStorageSync('token')
  // 直接赋值：isLogin.value 会变成字符串类型（类型不匹配，ts会报错）
  isLogin.value = !!token    // boolean 类型，!!token 转换为布尔值：类型安全。
}

const getBalance = async () => {
  if (!isLogin.value) return
  const res = await uni.request({
    url: '/api/user/balance'
  })
  balance.value = res.data.balance
}
</script>


7、扫码/拍照后返回：扫码页面返回后需要处理结果。
示例：
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const scanResult = ref('')

onShow(() => {
  // 检查是否有扫码结果（从全局变量或缓存中获取）
  const result = uni.getStorageSync('scan_result')
  if (result) {
    scanResult.value = result
    handleScanResult(result)
    uni.removeStorageSync('scan_result')
  }
})

const handleScanResult = (result: string) => {
  console.log('扫码结果：', result)
}
</script>

总结

默认用 onLoad：90% 的场景都适用

特殊情况用 onShow：需要实时刷新数据时

避免重复请求：合理判断是否需要每次刷新

不同场景的请求策略

场景类型	推荐方式	原因
订单状态页	onShow 每次都请求	支付结果需要实时反馈
个人中心	onShow 每次都请求	可能在其他页面修改资料
商品列表	onLoad 只请求一次	数据变化不频繁
商品详情	onLoad + 参数	通过参数传递 ID
购物车	onShow 每次都请求	商品数量可能变化
设置页	onLoad 只请求一次	一次性加载配置