vue中v-if和v-for優(yōu)先級(jí)是什么
本文小編為大家詳細(xì)介紹“vue中v-if和v-for優(yōu)先級(jí)是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue中v-if和v-for優(yōu)先級(jí)是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的蘆山網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
在vue2中，v-for的優(yōu)先級(jí)高于v-if；在vue3中，v-if的優(yōu)先級(jí)高于v-for。在vue中，永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上，會(huì)帶來(lái)性能方面的浪費(fèi)（每次渲染都會(huì)先循環(huán)再進(jìn)行條件判斷）；想要避免出現(xiàn)這種情況，可在外層嵌套template（頁(yè)面渲染不生成dom節(jié)點(diǎn)），在這一層進(jìn)行v-if判斷，然后在內(nèi)部進(jìn)行v-for循環(huán)。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
v-if指令用于條件性地渲染一塊內(nèi)容。指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 true值的時(shí)候被渲染。
v-for指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。v-for指令需要使用item in items形式的特殊語(yǔ)法，其中items是源數(shù)據(jù)數(shù)組或者對(duì)象，而item則是被迭代的數(shù)組元素的別名。
在v-for的時(shí)候，建議設(shè)置key值，并且保證每一個(gè)key值都是獨(dú)一無(wú)二的，這便是diff算法進(jìn)行優(yōu)化。
{{ item.label }}
優(yōu)先級(jí)
其實(shí)在vue2和vue3中的答案是截然相反的。
vue2中的v-for和v-if
v-if和v-for都是vue模板系統(tǒng)中的指令。
在vue模板編譯的時(shí)候，會(huì)將指令系統(tǒng)轉(zhuǎn)化為可執(zhí)行的render函數(shù)。
編寫(xiě)一個(gè)p標(biāo)簽，同時(shí)使用v-if和v-for
{{ item.title }}
創(chuàng)建vue示例，存放isShow和items數(shù)據(jù)。
const app = new Vue({
el: "#app",
data() {
return {
items: [
{ title: "foo" },
{ title: "baz" }]
}
},
computed: {
isShow() {
return this.items && this.items.length > 0
}
}
})? anonymous() {
with (this) { return
_c('div', { attrs: { "id": "app" } },
_l((items), function (item)
{ return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}_l是vue的列表渲染函數(shù)，函數(shù)內(nèi)部都會(huì)進(jìn)行一次if判斷。
初步得到結(jié)論：v-for優(yōu)先級(jí)是比v-if高。
再將v-for與v-if置于不同標(biāo)簽
{{item.title}}
再輸出下render函數(shù)
? anonymous() {
with(this){return
_c('div',{attrs:{"id":"app"}},
[(isShow)?[_v("\n"),
_l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}這時(shí)候我們可以看到，v-for與v-if作用在不同標(biāo)簽時(shí)候，是先進(jìn)行判斷，再進(jìn)行列表的渲染。
export function genElement (el: ASTElement, state: CodegenState): string {
if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
return genIf(el, state)
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
return genChildren(el, state) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
...
}在進(jìn)行if判斷的時(shí)候，v-for是比v-if先進(jìn)行判斷。
最終v-for優(yōu)先級(jí)比v-if高。
vue3中的v-for和v-if
在vue3中，v-if的優(yōu)先級(jí)高于v-fo，所以v-if執(zhí)行時(shí)，它調(diào)用的變量還不存在，就會(huì)導(dǎo)致異常
說(shuō)明：通常有兩種情況下導(dǎo)致我們這樣做：
1.為了過(guò)濾列表中的項(xiàng)目，比如：
v-for="user in users" v-if="user.isActive"
在vue2中，把它們放在一起，輸出的渲染函數(shù)中可以看出會(huì)先執(zhí)行循環(huán)再判斷條件，哪怕我們只渲染列表中一小部分元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，這會(huì)比較浪費(fèi)
在vue3中，v-if的優(yōu)先級(jí)高于v-fo，所以v-if執(zhí)行時(shí)，它調(diào)用的變量還不存在，就會(huì)導(dǎo)致異常
此時(shí)定義一個(gè)計(jì)算屬性（比如 activeUsers），讓其返回過(guò)濾后的列表即可（比如users.filter(u=>u.isActive)）。
2.為了避免渲染本應(yīng)該被隱藏的列表
v-for="user in users" v-if="shouldShowUsers"
此時(shí)把v-if移動(dòng)至容器元素上（比如ul、ol）或者外面包一層template即可。
注意事項(xiàng)
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上，帶來(lái)性能方面的浪費(fèi)（每次渲染都會(huì)先循環(huán)再進(jìn)行條件判斷）
computed: {
items: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}讀到這里，這篇“vue中v-if和v-for優(yōu)先級(jí)是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱(chēng)：vue中v-if和v-for優(yōu)先級(jí)是什么
網(wǎng)頁(yè)網(wǎng)址：
http://weahome.cn/article/ijjpes.html
重慶分公司
重慶分公司
