nvue开发与vue开发的常见区别
- 显隐控制方式：在nvue页面中，我们只能使用
v-if来控制元素的显隐，而v-show并不适用。
- 布局限制：nvue页面严格遵循flex布局，不支持其他布局方式。因此，在开发前，务必清晰地规划页面的纵向内容和滚动区域，以及每个纵向内容的横轴排布。
- 布局方向：nvue页面的默认布局方向是竖排（column）。若需更改，可在
manifest.json文件的app-plus -> nvue -> flex-direction节点下进行设置，但请注意，此设置仅在uni-app模式下生效。
- 编译差异：当nvue页面被编译为H5或小程序时，会进行一项css默认值对齐的操作。由于weex渲染引擎仅支持flex且默认方向为垂直，而H5和小程序端则使用web渲染，其默认flex方向为水平，因此需要进行此对齐操作以确保布局的一致性。
- 文本处理：在nvue中，文本内容必须置于
<text>组件内，直接在<div>或<view>的text区域内书写文本将无法绑定js变量。同时，只有<text>标签才支持字体大小和颜色的设置。
- 其他限制：nvue的布局不支持百分比和媒体查询，且在切换横竖屏时可能面临样式问题。此外，虽然nvue支持的css有限，但通过flex布局，我们仍然能够灵活地设计出所需的界面。值得注意的是，nvue并不支持背景图，但可以通过image组件和层级来实现类似web中的背景效果。
- nvue的css选择器限制：在nvue中，css选择器的支持相对较少，主要限于class选择器的使用。此外，nvue的组件在安卓端默认透明，若未设置background-color，可能引发重影问题。在绑定class时，仅支持数组语法。同时，需注意在安卓端大量使用圆角边框可能影响性能，特别是在样式复杂多变时。另外，nvue页面不自带bounce回弹效果，仅限于某些列表组件，如list、recycle-list和waterfall。
- 滚动与页面内容处理：由于原生开发中无页面滚动概念，内容超出屏幕高度时不会自动滚动。仅部分组件如list、waterfall和scroll-view/scroller可滚动。为适应这一特性，在nvue编译为uni-app模式时，系统会自动为页面外层添加scroller，实现内容过多时的自动滚动功能。但需注意，组件内部及含有recycle-list的页面不会自动套上scroller。
- 全局变量与样式：在App.vue中定义的全局js变量不会在nvue页面中生效，但globalData和vuex定义的变量会生效。而全局css则对nvue和vue页面均有效，但需注意某些在nvue下不支持的css可能导致编译时警告。为避免此问题，建议将不支持的css包裹在条件编译语句中。
- 字体与typescript支持：nvue中无法直接在style中引入字体文件。对于字体图标的使用，需参考相关加载自定义字体的指南。若使用本地字体，可通过plus.io的API转换路径来实现。此外，目前nvue页面还不支持typescript/ts的使用。
- nvue页面在关闭原生导航栏后，若需模拟状态栏，可参考相关方法。但请注意，使用原生导航栏始终是更优选择，因为其渲染速度远胜于nvue。原生排版引擎解析json并绘制导航栏的耗时极短，而nvue的js绘制整个页面则需更多时间，特别是在动画期间进入新页面或复杂页面时，若无原生导航栏，可能会出现屏幕白屏或闪屏现象。
- 此外，在iOS平台上使用下拉组件或refresh组件时，需注意一个问题。默认情况下，若滚动容器组件（如list或waterfall）的内容不足以撑满容器的可视区域，则无法实现上下滚动，进而影响下拉刷新功能的正常使用。为解决此问题，可在容器组件中设置alwaysScrollableVertical属性为true，以启用上下滚动支持，从而触发refresh组件的@refresh和@pullingdown事件。
