uniapp前端渲染
uniapp前端渲染的基本原理
uniapp采用基于Vue.js的运行时渲染机制，通过条件编译实现多端输出。在H5端直接使用浏览器DOM渲染，在小程序端转换为对应平台的模板语法，在App端使用weex原生渲染或纯webview渲染。
渲染模式选择
H5平台
- 完全基于浏览器DOM渲染
- 支持所有Vue.js特性
- 可通过vue-devtools调试
小程序平台
- 模板语法转换为wxml/axml/swan等
- 部分Vue指令需要特殊处理
- 样式需要遵循小程序规范
App平台
- weex模式：原生组件渲染
- webview模式：纯浏览器渲染
- 可配置使用nvue进行高性能渲染
性能优化技巧
减少DOM节点数量
- 避免过深的嵌套结构
- 使用v-for时添加key
- 大数据列表使用虚拟滚动
<template>
<view class="list">
<view v-for="item in items" :key="item.id">{{item.text}}</view>
</view>
</template>合理使用计算属性
- 避免在模板中写复杂逻辑
- 利用缓存机制减少计算
computed: {
filteredList() {
return this.list.filter(item => item.active)
}
}条件渲染策略
平台差异处理
- 使用条件编译注释
- 不同平台加载不同资源
// #ifdef H5
import h5Module from './h5-module.js'
// #endif
// #ifdef MP-WEIXIN
import wxModule from './wx-module.js'
// #endif动态class绑定
- 减少样式切换开销
- 预定义样式类组合
<view :class="{active: isActive, 'text-red': hasError}"></view>数据更新优化
避免不必要的响应式数据
- 大数据对象使用Object.freeze
- 静态数据可不放入data
data() {
return {
staticData: Object.freeze(largeDataSet)
}
}合理使用nextTick
- DOM更新后执行操作
- 避免连续多次数据修改
this.list.push(newItem)
this.$nextTick(() => {
// DOM更新完成后的操作
})渲染层与逻辑层通信
小程序环境优化
- 减少setData数据量
- 合并多次数据更新
- 避免传输大对象
// 不好的做法
this.setData({largeObject})
// 推荐做法
this.setData({'key.subKey': value})预渲染技术应用
预加载关键数据
- 页面跳转前获取数据
- 使用全局状态管理
骨架屏实现
- 定义loading状态模板
- 数据加载后切换显示
<template>
<view v-if="loading">
<!-- 骨架屏内容 -->
</view>
<view v-else>
<!-- 真实内容 -->
</view>
</template>
