uniapp之nvue

一. nvue的使用场景

1. 如果你不开发App，那么不需要使用nvue
   比如：nvue只能使用css选择器，而且有些写法受限
2. 为了实现app页面的性能优化，因为在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染，原生更快
3. 层级问题
   解决前端控件无法覆盖原生控件的层级问题。（在vue页面中）当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用nvue更好。因为nvue页面全部都是原生组件，互相之间没有层级问题。
   （或者在vue页面上也可以覆盖一个subnvue（一种非全屏的nvue页面覆盖在webview上），以解决App上的原生控件层级问题；
   或者使用cover-view,但只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。）
4. 原生组件问题
   map,video,live-pusher组件等，很多时候，官方都会推荐使用nvue，所以要注意一下。
5. 其他
   https://uniapp.dcloud.io/nvue-outline

二. nvue页面的写法

1. 新建页面

新建nvue页面，如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。

2. 开发页面

2.1 template

（1）可以使用到nvue专用组件，比如barcode和waterfall等
（2）只能使用v-if
（3）文本只能在text中,不能换行写内容，否则会出现无法去除的周边空白
（4）只能使用vue的数组语法，对象语法可以嵌套在里面，但class绑定的一定是数组
（5）图片使用image标签，支持使用base64，不支持svg格式图片

2.2 script

(1) 支持nvue的api，使用前导入模块，有uniapp内置插件也有第三方
(2) H5+,轻松调用手机的功能,nvue页面可直接使用plus的API，并且不需要等待plus ready。,http://www.html5plus.org/doc/h5p.html
(3) 支持uniapp的api,uni.navigateTo等

2.3 style

(1) 只能用flex布局，而且flex-direction是默认方向是column,可以全局设置https://uniapp.dcloud.io/collocation/manifest?id=nvue
(2) 只能用class选择器
(3) nvue组件默认是透明的，一定要用background-color,不然可能有重影
(4) 没有百分比，没有媒体查询
(5) 不能在 style 中引入字体文件，可以使用 DOM.addRule 以加载自定义字体
(6) 不支持在 nvue 页面使用 typescript/ts
(7) 尽量用原生导航
(8) 不支持在css里写背景图background-image

三. 总结

除了一些特殊考虑，涉及到app的东西，最好就是看下vue支不支持，不得已再用nvue。
以上总结于2022/2/27制定，由于uniapp会更新和优化，所以以上的总结可能会改变，所以这里只是整理了目前的存在的坑，详情还是以uniapp社区为主