今天小編給大家分享一下v-for和v-if的優(yōu)先級哪個更高的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)服務(wù)項目包括新津縣網(wǎng)站建設(shè)、新津縣網(wǎng)站制作、新津縣網(wǎng)頁制作以及新津縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，新津縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到新津縣省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
1、本身并不建議將v-for和v-if同時使用的。
2、vue2里面v-for比v-if的優(yōu)先級更高。因為vue2在模板編譯的時候會先處理v-for再處理v-if，所以生成的渲染函數(shù)會先執(zhí)行循環(huán)，然后在循環(huán)里面再執(zhí)行條件判斷。
3、這樣做帶來的問題就是
對于場景1：
每次重新渲染的時候，都要重新遍歷整個列表，其實我們只需要列表的一部分，這樣做浪費性能。推薦的做法是，通過計算屬性先過濾出我們需要的部分，再去渲染，更高效。
對于場景2:
globalShow這個判斷其實如果是false,循環(huán)并不需要執(zhí)行，但是現(xiàn)在跟v-if一起用，不管globalShow是否是true都要執(zhí)行循環(huán)，完全是浪費。推薦的做法是將v-if上移到ul容器。
4、需要注意的是，vue3的breaking change，在vue3中v-if的優(yōu)先級比v-for高，所以如果同時使用的話，對于場景1，這個時候user還沒有，v-if="user.show"就會報錯
5、一般我們?nèi)绻杏胑slint，也會給我們報錯，對應(yīng)的規(guī)則是：vue/no-use-v-if-with-v-for
例如：以下的模板，將會生成下面的渲染函數(shù)
生成的渲染函數(shù)如下
重慶分公司
重慶分公司
with(this) {
return _c('ul', _l((users), function (user) {
return (user.isActive) ? _c('li', user.name) : _e()
}), 0)
}從上面生成的渲染函數(shù)可以看出，會先執(zhí)行_l遍歷user，在里面進行條件判斷
處理v-if和v-for的源碼
src/compiler/index.js
// 模板解析，生成ast樹
const ast = parse(template.trim(), options)
if (options.optimize !== false) {
optimize(ast, options)
}
const code = generate(ast, options)根據(jù)ast生成代碼，假如是上面的模板，生成的ast簡化后如下
// 可以看出v-for和v-if都解析出來了
ast = {
'type': 1,
'tag': 'ul',
'attrsList': [],
'attrsMap': {},
'children': [{
'type': 1,
'tag': 'li',
'attrsList': [],
'attrsMap': {
'v-for': 'user in users',
'v-if': 'user.show'
},
// v-if解析出來的屬性
'if': 'user.show',
'ifConditions': [{
'exp': 'user.show',
'block': // 指向el自身
}],
// v-for解析出來的屬性
'for': 'users',
'alias': 'user',
'iterator1': 'index',
'parent': // 指向其父節(jié)點
'children': [
'type': 2,
'expression': '_s(user)'
'text': '{{user}}',
'tokens': [
{'@binding':'user'},
]
]
}]
}compiler/codegen/index.js
// generate 調(diào)用 genElement
const code = ast ? genElement(ast, state) : '_c("div")'
// genElement里面的處理
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
// 從這可以看出來，先執(zhí)行g(shù)enFor，處理v-for指令，在genFor里面會遞歸調(diào)用genElement，繼續(xù)處理v-if，genFor會將forProcessed設(shè)為true，這樣下次進來的時候就不會處理for了
} 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 {
// 最后這里處理標(biāo)簽等
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c('${el.tag}'${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}
// genFor的代碼
const exp = el.for // 對應(yīng)上面ast的 for: users
const alias = el.alias // alias: user
// iterator1 對應(yīng)v-for的(item,key,index) in items的key
// iterator2 對應(yīng)的是index
// 通常我們遍歷數(shù)組 key就是index
// 假如我們遍歷的是對象 key就是對象的key，index就是遍歷的索引
const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''
el.forProcessed = true // 下次遞歸調(diào)用genElement的時候就不會重復(fù)處理v-for了
return `${altHelper || '_l'}((${exp}),` +
`function(${alias}${iterator1}${iterator2}){`
// 這里處理完了v-for，遞歸調(diào)用genElement繼續(xù)處理v-if
`return ${(altGen || genElement)(el, state)}` +
'})'最終會生成類似如下的代碼返回出去
_l((users), function(user, index) {
// 如果有v-if 前面就會有個條件判斷，如user.isActive
return (user.isActive) ? _c('li', user.name) : _e()
});以上就是“v-for和v-if的優(yōu)先級哪個更高”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
