uni-app X 开发中最重要的规则之一
作者：我就是个世界
发表于：2026-05-09
这是 uni-app X 开发中最重要的规则之一
✅ uni-app X 官方正确导入规则（最终版）
功能 | 正确来源 |
|---|---|
ref/ reactive | ✅ vue |
computed/ watch | ✅ vue |
onLoad | ✅ @dcloudio/uni-app |
onShow | ✅ @dcloudio/uni-app |
onPullDownRefresh | ✅ @dcloudio/uni-app |
onReachBottom | ✅ @dcloudio/uni-app |
uni.xxx() | ✅ 全局 |
✅ Vue 响应式 API
import { ref, reactive, computed } from 'vue'✅ uni-app X 页面生命周期
import { onLoad, onShow, onReady, onHide, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'✅ uni 全局 API（不用 import）
uni.request() uni.navigateTo() uni.setStorageSync() uni.getStorageSync()
❌ 错误写法（以后绝对不再出现）
| 错误 | 原因 |
|---|---|
import { ref } from '@dcloudio/uni-app' | ❌ 不存在 |
import { onLoad } from 'vue' | ❌ Vue 没有 |
getCurrentPages()[i].$page | ❌ uni-app X 已移除 |
import '@dcloudio/uni-app-x' | ❌ 不存在 |
✅ AI 提示为什么会出现错误？
| 原因 | 说明 |
|---|---|
| uni-app X 文档不完整 | 很多旧写法没标注废弃 |
| HBuilderX 提示误导 | 类型服务不完善 |
| AI 在快速演进中 | 早期混合了 uni-app 写法 |
✅ 示例：标准页面模板（以后所有页面都按这个来）
<template>
<view>
<text>{{ msg }}</text>
</view>
</template>
<script setup>
// ✅ Vue 响应式
import { ref } from 'vue'
// ✅ uni-app X 生命周期
import { onLoad, onShow } from '@dcloudio/uni-app'
const msg = ref('Hello uni-app X')
onLoad((options) => {
console.log('page load', options)
})
onShow(() => {
console.log('page show')
})
</script>
<style scoped>
.container {
flex: 1;
justify-content: center;
align-items: center;
}
</style> 版权声明
本文仅代表作者观点，未经许可，不得转载。
请发表您的评论