Vue 3.0 v-if與v-for的優(yōu)先級(jí)對(duì)比

#概覽

• 非兼容：兩者作用于同一個(gè)元素上時(shí)，v-if 會(huì)擁有比 v-for 更高的優(yōu)先級(jí)。

#介紹

Vue.js 中使用最多的兩個(gè)指令就是 v-if 和 v-for，因此開(kāi)發(fā)者們可能會(huì)想要同時(shí)使用它們。雖然不建議這樣做，但有時(shí)確實(shí)是必須的，于是我們想提供有關(guān)其工作方式的指南。

#2.x 語(yǔ)法

2.x 版本中在一個(gè)元素上同時(shí)使用 v-if 和 v-for 時(shí)，v-for 會(huì)優(yōu)先作用。

#3.x 語(yǔ)法

3.x 版本中 v-if 總是優(yōu)先于 v-for 生效。

#遷移策略

由于語(yǔ)法上存在歧義，建議避免在同一元素上同時(shí)使用兩者。

比起在模板層面管理相關(guān)邏輯，更好的辦法是通過(guò)創(chuàng)建計(jì)算屬性篩選出列表，并以此創(chuàng)建可見(jiàn)元素。