1.uni-app 核心原理

uni-app 通过三层架构实现跨平台开发：

• 1. ​框架层​​：基于 Vue.js 的运行时框架
• 2. ​编译层​​：将 Vue SFC 编译为各平台专用代码
  • JS 部分：通过条件编译转换
  • 模板部分：转换为各平台模板语言（wxml、swan、ttml 等）
  • 样式部分：自动添加前缀（如 -webkit-）
• 3.​运行时层​​：提供统一的 API 和组件
  • JS API 通过 uni 对象提供跨平台调用
  • 组件映射为各平台原生组件

在小程序和App（Webview渲染模式）端，uni-app采用了与微信小程序类似的逻辑层与渲染层分离的架构

• 逻辑层：负责JavaScript代码的执行、数据处理和业务逻辑。它运行在一个独立的JavaScript引擎中（如小程序的JSCore）。
• 渲染层：负责页面的UI渲染，通常是一个Webview组件。
• 通信机制：两层之间通过原生提供的通信通道（如小程序的evaluateJavascript和setData）进行数据同步。当逻辑层数据变化时，会通过通信通道将变化的数据传递到渲染层进行视图更新。这种分离带来了更好的性能（JS执行不阻塞UI渲染）和安全性的提升，但通信过程会存在一定的损耗。

在H5端，逻辑层和渲染层都运行在同一个浏览器环境中，因此可以直接操作DOM，没有通信损耗。在App端，uni-app通过JSBridge实现JavaScript与原生系统的通信，从而调用设备能力

uni-app在App端提供了两种渲染引擎，以平衡开发效率和性能体验：

• Webview渲染：默认模式。将Vue组件编译为HTML/CSS/JS，在App的Webview中渲染。这种方式兼容性好，开发体验与H5类似，但性能上限受限于Webview。
• 原生渲染（nvue）：使用.nvue文件。Vue模板在编译时会直接映射为原生UI组件（如<view>变为原生View），最终由原生系统进行渲染。这种方式能带来更流畅的动画和更佳的列表性能，体验更接近原生应用，但写法上会受到一些约束

2.渲染引擎差异