一. 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

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社群為主