前言

要成功，先發(fā)瘋，頭腦簡(jiǎn)單往前沖！

三金四銀，金九銀十，多學(xué)知識(shí)，也不能埋頭苦干，要成功，先發(fā)瘋，頭腦簡(jiǎn)單往前沖！
最近發(fā)現(xiàn)很多人也在問我v-for 和 v-if 的面試問題，那么下面我就個(gè)大家分析一下！

1、面試經(jīng)

提到這個(gè)問題，很多人肯定會(huì)脫口而出：
	
 1. Vue2 中 不可以
 2. Vue3 中 可以

再往深問，可能少部分人會(huì)回答出：

1. Vue2 中 v-for 優(yōu)先級(jí)比 v-if 高
2. Vue3 中 v-if 優(yōu)先級(jí)比 v-for 高

但是其實(shí)很多人都是背的，具體為啥會(huì)這樣，很多人都沒搞清楚，稍微再往深一問，95%的人就回答不出來了~

分析Vue2：

在項(xiàng)目中使用 v-for 和 v-if 共存與一個(gè)標(biāo)簽上，Vue2 中肯定會(huì)警告我們，不建議這么做，但是為啥不建議，根本沒幾個(gè)人知道~

	可以看到在 Vue2 中，會(huì)先循環(huán)，然后在循環(huán)中去判斷，判斷為真則正常渲染，
	判斷為假則執(zhí)行 _e 函數(shù)，_e函數(shù)就是注釋的意思，就是把判斷為假的節(jié)點(diǎn)注釋掉，也就是：
	1、先走 v-for 循環(huán) 3 次
	2、在循環(huán)體中走 v-if 判斷
	3、判斷 item === 2 則正常渲染，item === 2 則把這個(gè)節(jié)點(diǎn)注釋掉
	所以最終選出出來 1、3 兩個(gè)節(jié)點(diǎn)

因?yàn)槠鋵?shí)我們只需要渲染2個(gè)節(jié)點(diǎn)，但是最終還是循環(huán)了3次，造成了性能浪費(fèi)，也就是 v-for 優(yōu)先級(jí)高于 v-if，共存時(shí)會(huì)造成性能浪費(fèi)

分析Vue3：

但是在 Vue3 中，v-for 和 v-if 卻是可以共存的，為什么呢？我們還是拿最簡(jiǎn)單的代碼來分析

可以到這個(gè)網(wǎng)站：**https://play.vuejs.org/**，看到解析后的代碼

可以看到，跟 Vue2 不同的是，Vue3 中是先走判斷，然后再走循環(huán)的，也就是：
	1、先走 v-if 判斷
	2、如果 item !== 2，就去走循環(huán)也就是 v-for
	3、如果 item == 2，就執(zhí)行 createCommandVNode，創(chuàng)建一個(gè)注釋節(jié)點(diǎn)
	也就是在 Vue3 中，v-if 優(yōu)先級(jí)是高于 v-for 的，真正循環(huán)的只有1、3這兩個(gè)節(jié)點(diǎn)，
	這提高了性能!
	因?yàn)樵?v-for 和 v-if 共存的時(shí)候，Vue3 會(huì)在底層幫我們轉(zhuǎn)換成

2、正確回答

	1、首先解答完vue2和vue3后的利和弊
	2、給出如何解決這個(gè)問題的思路，如使用computed處理

3、總結(jié)

總結(jié)就是不要讓 v-if 和 v-for 共存在同一個(gè)標(biāo)簽中，遇到這種情況需要使用 computed 去計(jì)算，然后再去渲染!

總結(jié)：

前端路上 | 所知甚少，唯善學(xué)。
各位小伙伴有什么疑問，歡迎留言探討。

— 關(guān)注我：前端路上不迷路 —文章來源地址http://www.zghlxwxcb.cn/news/detail-802058.html

到了這里，關(guān)于VUE 中的 v-for 和 v-if 是否可以共存的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！