克拉玛依市网站建设_网站建设公司_域名注册_seo优化

​​​​​一 核心差异总览​​

• ​​定位与目标​​：​​Vue​​ 面向 ​​Web 单页应用（SPA）​​；​​UniApp​​ 基于 Vue 语法，面向 ​​多端（H5、微信/支付宝/抖音等小程序、App）​​ 的跨端应用。
• ​​路由机制​​：Vue 使用 ​​Vue Router​​ 前端路由；UniApp 通过 ​​pages.json​​ 声明页面栈，用 ​​uni.navigateTo / redirectTo / switchTab / reLaunch​​ 等 API 进行页面跳转。
• ​​项目配置​​：Vue 使用 ​​vue.config.js / router.js​​ 等；UniApp 使用 ​​manifest.json（应用配置）​​、​​pages.json（页面与窗口）​​、​​package.json​​。
• ​​标签与组件​​：Vue 使用标准 ​​HTML 标签​​；UniApp 使用小程序风格组件（如 ​​view、text、navigator、image、scroll-view、swiper​​）。
• ​​生命周期​​：UniApp 在 Vue 生命周期基础上新增 ​​应用生命周期（onLaunch、onShow）​​ 与 ​​页面生命周期（onLoad、onShow、onPullDownRefresh 等）​​。
• ​​API 体系​​：UniApp 提供统一的 ​​uni.xxx​​ API（网络、存储、导航、设备、授权等），而非浏览器的 ​​window / document​​ 对象。
• ​​样式与适配​​：UniApp 推荐 ​​rpx​​ 响应式单位与 ​​Flex​​ 布局，并提供 ​​page​​ 根选择器；非 H5 端样式能力与选择器受限。
• ​​运行环境​​：非 H5 端运行在 ​​JSCore​​ 等原生环境，无 DOM/BOM；H5 端运行在浏览器环境。

​​二 项目结构与配置​​

• ​​页面声明与路由​​：所有页面必须在 ​​pages.json -> pages​​ 数组中声明，第一项为首页；通过 ​​pages.json -> tabBar​​ 配置原生底部标签。页面跳转使用 ​​uni.navigateTo​​ 等 API，而非 Vue Router。
• ​​核心配置文件​​：
  • ​​manifest.json​​：应用名称、图标、权限、各平台（如 ​​mp-weixin​​）特有配置（如 ​​appid​​）。
  • ​​pages.json​​：页面路径、窗口样式、原生导航栏、tabBar、分包等。
  • ​​package.json​​：依赖与脚本（支持多平台扩展字段）。
• ​​H5 路由差异​​：仅 ​​H5 端​​ 可引入 ​​Vue Router​​ 实现 SPA 路由；小程序/App 端不支持前端路由。

​​三 模板语法与事件差异​​

• ​​标签与语义化​​：优先使用 ​​view、text、navigator、image、button​​ 等小程序风格标签；避免使用 ​​div、span、a、img​​ 等 Web 标签以保证多端一致性。
• ​​Class 与 Style 绑定​​：
  • 支持 ​​:class="{ active: isActive }"​​、​​:style="{ color: c }"​​ 等表达式。
  • ​​非 H5 端不支持​​ 将对象直接传入（如 ​​:class="classObject"​​、​​:style="styleObject"​​）；如需对象式绑定，请用 ​​computed​​ 返回字符串。
• ​​事件绑定与修饰符​​：
  • 统一使用 ​​@click / @input​​ 等 Vue 事件绑定；不要用小程序 ​​bind/catch​​。
  • 事件修饰符：​​.stop​​ 全端支持；​​.prevent / .self / .once / .capture / .passive​​ 仅在 ​​H5​​ 支持。
  • 禁止蒙层滚动：​​@touchmove.stop.prevent​​。
• ​​列表渲染差异​​：
  • ​​v-for="(item,index) in 10"​​：​​H5 的 item 从 1 开始​​，其他端从 ​​0​​ 开始，可用 ​​index​​ 保持一致。
  • ​​非 H5 端​​ 不支持对象遍历的第三个参数 ​​index​​。
• ​​表单控件​​：​​H5 的 select​​ 用 ​​picker​​ 组件替代；​​radio​​ 用 ​​radio-group​​ 替代。

​​四 生命周期与数据通信​​

• ​​生命周期映射与新增​​：
  • 页面创建阶段：Vue 的 ​​created​​ 可由 UniApp 的 ​​onLoad​​ 承担；​​mounted​​ 可由 ​​onReady​​ 近似替代。
  • 应用级：​​onLaunch / onShow​​ 用于应用初始化与前后台切换。
  • 页面级：​​onShow​​（每次显示）、​​onHide​​（隐藏）、​​onPullDownRefresh​​（下拉刷新）、​​onReachBottom​​（上拉加载）等。
• ​​页面传参与通信​​：
  • 通过 ​​navigator url="/page?id=1"​​ 传参；目标页在 ​​onLoad(options)​​ 接收。
  • 复杂场景可用 ​​Event Channel​​ 进行页面间双向通信。
• ​​状态管理​​：
  • ​​Vue 3​​ 项目可直接使用 ​​Pinia​​（与 Vue 3 一致）；​​Vue 2​​ 项目使用 ​​Vuex​​。
  • 持久化需适配多端存储：如用 ​​uni.setStorageSync / getStorageSync​​ 替代 ​​localStorage​​。

​​五 Vue 中不适用于 UniApp 的清单与替代方案​​

• ​​全局配置与 API（非 H5 端不支持）​​：
  • 配置：​​Vue.config.devtools / keyCodes / performance​​。
  • API：​​Vue.nextTick​​（非 H5）、​​Vue.directive / Vue.filter / Vue.compile​​（小程序端不支持）。
• ​​选项与实例能力（受限/不支持）​​：
  • 选项：​​el / template / render / renderError / delimiters / functional / comments​​（非 H5 不支持）；小程序端不支持 ​​model / inheritAttrs​​。
  • 实例：​​vm.el/vm.mount()​​（非 H5 不支持）；小程序端不支持 ​​vm.isServer/vm.attrs / vm.$listeners​​。
• ​​模板指令与特殊属性（受限/不支持）​​：
  • 指令：​​v-html​​（仅 ​​H5/App-vue(V3)​​ 支持，小程序不支持）、​​v-pre / v-once​​（小程序不支持）、​​v-cloak​​（非 H5 不支持）、​​v-bind="object"​​（小程序不支持）。
  • 属性：​​is​​（小程序不支持）；​​classObject / styleObject​​（非 H5 不支持）；自定义组件上 ​​Class/Style 绑定​​（非 H5 端受限）。
• ​​内置组件与高级特性（非 H5 不支持）​​：
  • 组件：​​component​​（小程序不支持）、​​transition / transition-group / keep-alive​​（非 H5 不支持）。
  • 其他：​​动态组件、异步组件、inline-template、X-Templates、scoped slot（旧版）​​ 等非 H5 端不支持。
• ​​浏览器/DOM/BOM（非 H5 端不支持）​​：
  • 对象：​​window / document / location / navigator / cookie / localStorage / websql / indexdb / webgl​​ 等不可用；不要依赖 ​​jQuery​​ 等浏览器库。
  • 如需操作 DOM，App 端可通过 ​​renderjs​​ 方案隔离；小程序端请用数据驱动与组件 API。
• ​​样式与选择器（非 H5 受限）​​：
  • 选择器：不支持 ​​通配符 ​​*；​​body​​ 选择器请改为 ​​page​​；避免使用 ​​:root​​。
  • 单位与布局：推荐使用 ​​rpx​​ 与 ​​Flex​​；原生组件层级高于前端组件，遮挡请用 ​​cover-view​​。
• ​​事件与组件细节​​：
  • 自定义组件在部分小程序渲染可能多一级节点，可用 ​​virtualHost / mergeVirtualHostAttributes​​ 调整；
  • ​​scroll-view​​ 的 ​​scroll-top​​ 重复赋相同值不会触发滚动，需先记录内部位置再二次设置。

​​六 实战迁移与最佳实践​​

• ​​路由与导航​​：优先使用 ​​pages.json + uni API​​ 实现跨端导航；仅 ​​H5​​ 场景再引入 ​​Vue Router​​。
• ​​网络请求​​：可用 ​​axios​​ 拦截器，但底层请求需适配为 ​​uni.request​​（通过 ​​adapter​​），统一处理 ​​loading / toast​​。
• ​​富文本​​：非 H5 端用 ​​rich-text​​ 组件渲染；避免 ​​v-html​​ 依赖。
• ​​条件编译​​：同一文件内用条件编译处理平台差异（如 ​​// #ifdef MP-WEIXIN / H5 / APP-PLUS​​），减少多份代码维护。
• ​​适配与布局​​：使用 ​​rpx​​ 与 ​​Flex​​；注意 ​​原生组件层级​​ 与 ​​cover-view​​ 覆盖；H5 与 App 的坐标系差异可用 ​​--window-top / --window-bottom​​ 变量统一处理。

​​七 汇总对比表​​

表一 核心差异总览

表二 生命周期映射与差异

表三 模板语法与事件差异

表四 样式与选择器差异

表五 API 与运行环境差异