当前位置：首页 > uni-app

uniapp前端渲染

2026-01-14 18:57:45uni-app

uniapp前端渲染的基本原理

uniapp基于Vue.js框架，采用了一套代码多端运行的机制。前端渲染主要通过Vue的虚拟DOM技术实现，在不同平台（H5、小程序、App等）上会编译为对应平台的渲染方式。

H5端直接使用浏览器DOM渲染，小程序端转换为小程序模板语法，App端根据不同渲染模式处理（weex或uni-app原生渲染）。

设置页面渲染模式

在manifest.json中可以配置全局渲染模式：

{
  "app-plus": {
    "renderer": "native" // 可选值：native、weex
  }
}

pages.json中可单独配置页面级渲染策略：

{
  "path": "pages/index/index",
  "style": {
    "renderer": "weex"
  }
}

条件编译处理多端差异

使用特殊注释实现多端条件编译：

<!-- #ifdef H5 -->
<div>仅H5平台显示</div>
<!-- #endif -->

<!-- #ifndef MP-WEIXIN -->
<div>非微信小程序平台显示</div>
<!-- #endif -->

优化渲染性能的方法

避免在模板中使用复杂表达式，改用计算属性：

computed: {
  filteredList() {
    return this.list.filter(item => item.active)
  }
}

合理使用v-if和v-show：

<div v-if="heavyCondition">需要频繁切换时用v-show</div>
<div v-show="simpleCondition">初始渲染成本高时用v-if</div>

列表渲染优化技巧

为v-for设置唯一key：

<view v-for="(item,index) in list" :key="item.id">
  {{item.name}}
</view>

大数据量列表使用虚拟滚动：

<scroll-view scroll-y style="height: 100vh">
  <view v-for="item in bigData" :key="item.id">
    {{item.content}}
  </view>
</scroll-view>

样式渲染注意事项

使用rpx单位实现响应式布局：

.text {
  font-size: 28rpx;
  margin: 20rpx;
}

避免选择器层级过深：

/* 不推荐 */
.page .content .list .item {}

/* 推荐 */
.list-item {}

动态样式绑定方案

通过对象语法绑定动态class：

<view :class="{ active: isActive, 'text-danger': hasError }"></view>

使用数组语法组合多个class：

<view :class="[activeClass, errorClass]"></view>

内联样式绑定：

<view :style="{ color: activeColor, fontSize: fontSize + 'px' }"></view>

渲染生命周期管理

页面生命周期函数：

export default {
  onLoad() {},    // 页面加载
  onReady() {},   // 页面初次渲染完成
  onShow() {},    // 页面显示
  onHide() {},    // 页面隐藏
  onUnload() {}   // 页面卸载
}

组件生命周期函数：

export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
}

uniapp前端渲染