v-if和v-for哪個(gè)優(yōu)先級更高？

結(jié)論：

vue2輸出的渲染函數(shù)是先執(zhí)行循環(huán)，在看條件判斷，如果將v-if和v-for寫在一個(gè)標(biāo)簽內(nèi)，哪怕只渲染列表中的一小部分，也要重新遍歷整個(gè)列表，無形造成資源浪費(fèi)。vue3中則相反，v-if優(yōu)先級高于v-for，所以兩者寫在一個(gè)標(biāo)簽內(nèi)，如果v-if使用了v-for循環(huán)出來的變量，則會(huì)有變量不存在的異常。

場景：

1、過濾列表中的項(xiàng)目。

2、避免渲染本應(yīng)該被隱藏的列表。

解決：

1、通過compute返回過濾后的列表

2、外面包一層template分開v-for和v-if

源碼：

vue2

v2：https://github1s.com/vuejs/vue/blob/HEAD/src/compiler/codegen/index.js#L65-L66

vue3

v3：https://github1s.com/vuejs/core/blob/HEAD/packages/compiler-core/src/codegen.ts#L586-L587