村長的話
同學們好，我是Young村長。關(guān)于Vue框架部分會涉及一些高頻面試題，大多數(shù)看似非常初級，在官方文檔就能查看的純記憶性質(zhì)的面試題，比如:
- vue組件之間如何通信?
- vue生命周期有哪些？
這類面試題在文檔中就能找到答案，網(wǎng)絡(luò)上面找到的答案也是千篇一律。大家只要使用過vue并且稍加記憶即可流暢作答，但如果你也這樣回答，就算自己真的比其他競爭者更有實力，也很難脫穎而出，更別提獲得高薪offer了。
事實真是這樣嗎？
答案當然是否定的。以下本系列提煉于全棧課程的訓練營，我們的問題并不多，但是旨在將回答問題的方式、思路和層次提升一個層級。如果你真的學會了這些方法，在絕大多數(shù)情況下都會有舉一反三的效果，可以說拿下offer如探囊取物一般簡單！
下面開會
v-if和v-for哪個優(yōu)先級更高？如果兩個同時出現(xiàn)，應(yīng)該怎么優(yōu)化得到更好的性能？
源碼中找答案compiler/codegen/index.js
<p v-for="item in items" v-if="condition">
做個測試如下
<!DOCTYPE html>
<html>
<head>
<title>Vue事件處理</title>
</head>
<body>
<div id="demo">
<h1>v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？</h1>
<!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> -->
<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>
</div>
<script src="../../dist/vue.js"></script>
<script>
// 創(chuàng)建實例
const app = new Vue({
el: '#demo',
data() {
return {
children: [
{title:'foo'},
{title:'bar'},
]
}
},
computed: {
isFolder() {
return this.children && this.children.length > 0
}
},
});
console.log(app.$options.render);
</script>
</body>
</html>
兩者同級時，渲染函數(shù)如下：
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？")]),_v(" "),
_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})
_l包含了isFolder的條件判斷
兩者不同級時，渲染函數(shù)如下
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？")]),_v(" "),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})
先判斷了條件再看是否執(zhí)行_l
結(jié)論：
- 顯然v-for優(yōu)先于v-if被解析（把你是怎么知道的告訴面試官）
- 如果同時出現(xiàn)，每次渲染都會先執(zhí)行循環(huán)再判斷條件，無論如何循環(huán)都不可避免，浪費了性能
- 要避免出現(xiàn)這種情況，則在外層嵌套template，在這一層進行v-if判斷，然后在內(nèi)部進行v-for循環(huán)
- 如果條件出現(xiàn)在循環(huán)內(nèi)部，可通過計算屬性提前過濾掉那些不需要顯示的項
下篇文章我們將繼續(xù)來講解"data的限制"，關(guān)注小編不迷路，持續(xù)為你輸送前端爆文~
動動小手點個贊，與小編一起勇闖前端圈兒，歡迎留言評論，一起討論喲~~
