Uniapp .vue 与 .nvue 区别与书写区别；混搭使用与场景注意事项；

卡尔特斯
1,301 阅读6分钟

一、区别与书写区别

  • 在 UniApp 中，.vue 和 .nvue 文件虽然都用来开发页面，但它们有一些显著的区别，主要体现在 渲染引擎、性能、开发体验 和 支持特性 方面。以下是具体区别及在书写上的影响：

1. 渲染引擎

  • .vue 文件：使用的是 WebView 渲染引擎，页面通过 Web 技术（HTML+CSS+JavaScript）渲染。

    • 更接近传统的前端开发方式。
    • 支持完整的 CSS 和 JavaScript 特性。
    • 性能略低，适合非高频交互页面。

  • .nvue 文件：使用的是 原生渲染引擎（Weex 技术）。

    • 页面元素直接渲染为原生组件，性能接近原生。
    • 适合高性能需求的页面，比如动画复杂或交互频繁的场景。

2. 书写语法差异

  • CSS 支持

    • .vue 文件可以使用常规的 CSS（包括 flex、position 等所有样式）。

    • .nvue 文件的样式支持有限：

      • 主要支持 flexbox 布局（Weex 的布局引擎）。
      • 不支持 position: fixed 等样式，需用 sticky 等替代。
      • 部分复杂 CSS 特性（如动画 keyframes）可能不支持。

  • 组件差异

    • .vue 文件支持更丰富的组件（比如第三方 H5 组件）。
    • .nvue 文件使用的组件基本是原生组件，部分 H5 组件不能直接使用，需替代或封装。

  • 事件与 API

    • .vue 和 .nvue 文件中基本的事件绑定（如 @click）相同。
    • .nvue 中部分特性需要通过专属 API 实现，比如更细粒度的原生组件交互。

3. 性能与开发体验

  • 性能

    • .vue 的性能受 WebView 渲染限制，适合普通页面。
    • .nvue 的性能接近原生，更适合性能敏感场景。

  • 调试

    • .vue 文件支持热更新和更强的调试功能。
    • .nvue 文件的调试相对有限，但支持真机查看接近原生的效果。

4. 实际书写上的区别

  • .vue 文件开发：

    <template>
  <view class="container">
    <text class="title">Hello UniApp</text>
  </view>
</template>

<script>
export default {
  data() {
    return { msg: 'Hello' };
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 20px;
}
</style>

  • .nvue 文件开发：

    <template>
  <div class="container">
    <text class="title">Hello UniApp</text>
  </div>
</template>

<script>
export default {
  data() {
    return { msg: 'Hello' };
  }
};
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 20px;
}
</style>

5. 开发选择建议

  • 使用 .vue 文件：

    • 如果开发普通的业务页面，性能要求不高。
    • 需要使用复杂的 H5 组件或第三方库。
    • 需要完整的 CSS 支持。

  • 使用 .nvue 文件：

    • 高性能需求（动画、列表滚动、页面切换流畅性等）。
    • 涉及大量原生交互或需要类似原生的体验。

总结：

  • 从语法上看，.vue 和 .nvue 的书写差异不大，但 .nvue 文件对 CSS 的限制和组件选择的要求会影响开发灵活性。可以根据具体业务场景合理选择合适的页面类型。

二、混搭使用与使用场景

  • 在 UniApp 中，.vue 和 .nvue 文件是可以混搭使用的，不同类型的页面可以根据需求选择适合的文件类型，这为开发者提供了灵活性。但也有一些注意事项：

1. 混搭使用的场景

  • 按页面需求选择文件类型：

    • 使用 .nvue 文件开发高性能页面（如复杂动画、频繁交互的页面）。
    • 使用 .vue 文件开发普通业务页面（如表单、静态页面、简单交互页面）。

  • 页面互相跳转：

    • pages.json 中定义的页面可以是 .vue 或 .nvue，它们可以正常相互跳转。
    • 通过 uni.navigateTo、uni.redirectTo 等方法可以跳转到不同类型的页面，无需额外配置。

2. 引用组件的限制

  • .vue 文件引用 .nvue 文件：

    • 无法直接引用 .nvue 页面或组件，原因是 .nvue 使用原生渲染，与 WebView 渲染机制不同。
    • 如果需要复用 .nvue 的逻辑，可以通过封装公共模块（如 JavaScript 方法）实现。

  • .nvue 文件引用 .vue 文件：

    • .nvue 文件中无法直接引用 .vue 组件，因为 .vue 是基于 Web 技术渲染的，无法在原生环境中运行。
    • 需要将逻辑部分抽取为公共模块供 .nvue 使用。

3. 混搭使用的注意事项

  • 样式和布局的兼容性：

    • .vue 支持更丰富的 CSS 特性，而 .nvue 文件仅支持部分样式（如 flexbox）。
    • 如果需要统一样式，需要为 .vue 和 .nvue 分别设计样式方案。

  • 数据通信与状态管理：

    • .vue 和 .nvue 文件可以共用 Vuex 或其他全局状态管理工具。
    • 如果页面之间需要传递数据，建议通过路由参数或全局状态。

  • 文件类型与平台表现：

    • H5 平台上，.vue 文件表现更好，因为 .nvue 的原生渲染特性在 H5 环境中不起作用。
    • App 平台上，.nvue 文件的性能表现更好，适合高性能需求。

4. 实际开发建议

  • 使用页面混搭： 在一个项目中，可以根据不同页面需求自由选择 .vue 或 .nvue，它们可以正常共存。
  • 组件开发： 如果有需要复用的组件，尽量使用 .vue 开发，因为 .vue 的兼容性更好，适用于更多平台。
  • 统一管理： 如果项目需要统一的开发体验，尽量在初期明确哪些页面使用 .nvue，哪些使用 .vue，避免后期维护成本增加。

总结

  • .vue 和 .nvue 文件可以混搭使用，但需要注意它们之间不能直接相互引用组件。通过合理规划和使用路由跳转、公共模块、全局状态，可以实现两者的有效协作，充分利用各自的优势。

三、.nvue 开发细节

  • .nvue 使用的是基于 weex 的布局引擎，其布局规范基于 Flexbox 模型，类似于标准 CSS 的 Flex 布局。

  • Weex 的布局引擎 是 Yoga，它是由 Facebook 开发的一个跨平台布局引擎，专注于高效实现 Flexbox 布局模型。Yoga 被广泛应用于跨平台开发框架，如 React Native 和 Weex。

1. Yoga 引擎特点

  • 基于 Flexbox：

    • Yoga 完全实现了 CSS3 的 Flexbox 布局模型，适用于现代响应式布局。
    • 支持 flex-direction、justify-content、align-items 等常见 Flexbox 属性。

  • 跨平台：

    • Yoga 使用 C/C++ 编写，性能优越。
    • 提供了多语言绑定（如 Java、Objective-C、Python 等），可用于 Android、iOS 和其他平台。

  • 轻量和高效：

    • Yoga 被设计为嵌入式引擎，内存占用和计算资源使用非常少，适合移动端开发。

  • 无额外依赖：

    • Yoga 不依赖浏览器引擎，也不支持复杂的 CSS（如浮动或表格布局）。

2. Weex 与 Yoga 的关系

  • Weex 使用 Yoga 引擎来解析 .nvue 文件中的样式并计算布局，因此 .nvue 的布局语法会受到 Yoga 的限制和特点的影响。

  • 支持的 CSS 属性

    Yoga 支持的布局相关属性主要是 Flexbox 的子集，常见的包括：

    • display: flex
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-self
    • flex
    • margin
    • padding

  • 不支持的 CSS 属性

    由于 Yoga 的限制，Weex 中的布局不支持以下属性：

    • position: fixed
    • float
    • 部分复杂的伪类和伪元素（如 ::before 和 :hover）。

3. Yoga 与 Weex 的布局渲染流程

  • CSS 样式解析：

    • .nvue 文件中的样式被 Weex 解析为 Yoga 可理解的布局属性。

  • 布局计算：

    • Yoga 根据 Flexbox 算法计算每个节点的位置和大小。

  • 原生渲染：

    • 计算结果交由 Weex 的渲染引擎（如 Android 的 View、iOS 的 UIView）进行原生组件的绘制。
avatar
文章
阅读
粉丝