使用 uni-app 开发 APP，nvue 页面和 vue 页面有什么区别？如何选型？浅谈两种开发模式的优缺点

前言

这是一篇有关技术选型的文章，技术细节较少，主要是讲清楚一些概念。如果要了解具体细节，看官方文档应该是更快的。

nvue 到底是什么？

uni-app 官网对 nvue 的介绍非常详细，但有很多概念初学者不熟悉，看起文档来也是一脸懵，毕竟官方的文档不是针对初学者的，更像是查询手册。nvue 其实就是 native vue 的意思，取名参考 react-native，意思就是用 vue 语法来开发 APP 应用，并且是原生渲染 UI 界面，需要注意的是，nvue 开发时，页面或者组件文件后缀名必须是 .nvue，否则 uni-app 会按 vue 来编译。

uni-app 中如果使用 vue 页面开发，就是用网页渲染（即 webview），一般来说，原生渲染性能会比网页渲染好，那在开发项目的时候应该怎么选择呢？

vue 页面开发优势

• 语法几乎和常规的 vue 开发 web 应用一致，无需学习成本
• vue 页面可以同时编译到 app / 小程序 / h5 端，不同平台往往只需要调整些许，开发效率很高
• 开发体验接近 web，css 布局写法兼容高，调试很方便，特别是界面布局的预览和调试

可以看出，其实日常开发项目中，很多场景 vue 页面都能满足，但在开发 APP 时，就会有一些功能需求就很难满足，可能是因为网页的原因实现不了，也可能是因为网页的性能太差了，导致体验灾难。

nvue 补全 vue 页面的缺陷

看到这里我们就很清楚了，nvue 就是被用来解决在开发 APP 时，那些网页性能问题或者是实现不了的功能，常见的问题一般有这些：

• APP 开发中，滑动到底部自动加载的新闻资讯类的文章列表，vue 页面在内容多了以后会卡顿，如果还要左右切换文章分类，体验非常糟糕，使用 nvue 可以完美解决；
• 有开发手机端 h5 经验的人都知道，手机端局部滚动性能非常差，vue 页面同样有这个问题，而 nvue页面就没有这个问题，区域滚动很流畅；
• 组件覆盖层级问题。我就遇到过想要在 APP 的视频播放组件上增加一个返回按钮的需求，但由于 vue 页面就是一个网页，而视频组件是原生组件，所以 vue 里永远没法设置一个元素盖在视频上，而 nvue 就可以。虽然官方也有能覆盖的组件，比如 <cover-image> 组件，但项目还有很多原生组件，所以这时候用 nvue 写页面会更方便；
• APP 启动速度会更快。使用 vue 页面开发的 APP，打开时会先启动 webview 组件开打开网页，一般都在 3 秒以上，如果首页使用 nvue 开发，然后在 manifest 里配置 fast 模式，可以在 1 秒内打开 APP，用户体验非常好。

总的来说，我大部分场景下都是用 vue 页面来开发 APP，然后某些体验要求高的核心功能，再使用 nvue 来补充。当然你也可以全部页面都用 nvue 来开发，但 nvue 页面开发不够灵活，主要是 CSS 支持的样式不多，而且仅支持 flex 布局，在写需要页面布局时，需要习惯一段时间。

最后希望这篇文章讲清楚了两者的区别，能帮助你理解。