demo如下：

image.png

同級渲染時，函數(shù)如下

image.png

先循環(huán)再渲染，也就是說v-for的優(yōu)先級高于v-if ，這意味著v-if將分別運行于每個v-for中 造成了重復(fù)浪費。
當(dāng)你想為僅有的一些項渲染節(jié)點時，這種優(yōu)先級的機制會十分有用，如下：

image.png

兩者不同級時：

image.png

1、顯然v-for優(yōu)先于v-if被解析）
2、如果同時出現(xiàn)，每次渲染都會先執(zhí)行循環(huán)再判斷條件，無論如何循環(huán)都不可避免，浪費了性能
3、要避免出現(xiàn)這種情況，則在外層嵌套template，在這一層進(jìn)行v-if判斷，然后在內(nèi)部進(jìn)行v-for循環(huán)
4、如果條件出現(xiàn)在循環(huán)內(nèi)部，可通過計算屬性提前過濾掉那些不需要顯示的項