面試官:為什麼Vue中的v-if和v-for不建議一起用?
一、作用
v-if
指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true
值的時候被渲染
v-for
指令基於一個陣列來渲染一個列表。v-for
指令需要使用 item in items
形式的特殊語法,其中 items
是源資料陣列或者物件,而 item
則是被迭代的陣列元素的別名
在 v-for
的時候,建議設定key
值,並且保證每個key
值是獨一無二的,這便於diff
演算法進行優化
兩者在用法上
1 <Modal v-if="isShow" /> 2 3 <li v-for="item in items" :key="item.id"> 4{{ item.label }} 5 </li>
二、優先順序
v-if
與v-for
都是vue
模板系統中的指令
在vue
模板編譯的時候,會將指令系統轉化成可執行的render
函式
示例
編寫一個p
標籤,同時使用v-if
與 v-for
1 2 <div id="app"> 3 4 <p v-if="isShow" v-for="item in items"> 5 6 {{ item.title }} 7 8 </p> 9 10 </div>
建立vue
isShow
與items
資料
1 2 const app = new Vue({ 3 4 el: "#app", 5 6 data() { 7 8 return { 9 10 items: [ 11 12 { title: "foo" }, 13 14 { title: "baz" }] 15 16 } 17 18 }, 19 20 computed: { 21 22 isShow() { 23 24 return this.items && this.items.length > 0 25 26 } 27 28 } 29 30 })
模板指令的程式碼都會生成在render
函式中,通過app.$options.render
就能得到渲染函式
1 ƒ anonymous() { 2 3 with (this) { return 4 5 _c('div', { attrs: { "id": "app" } }, 6 7 _l((items), function (item) 8 9 { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) } 10 11 }
_l
是vue
的列表渲染函式,函式內部都會進行一次if
判斷
初步得到結論:v-for
優先順序是比v-if
高
再將v-for
與v-if
置於不同標籤
<div id="app"> <template v-if="isShow"> <p v-for="item in items">{{item.title}}</p> </template> </div>
再輸出下render
函式
1 2 ƒ anonymous() { 3 4 with(this){return 5 6 _c('div',{attrs:{"id":"app"}}, 7 8 [(isShow)?[_v("\n"), 9 10 _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)} 11 12 }
這時候我們可以看到,v-for
與v-if
作用在不同標籤時候,是先進行判斷,再進行列表的渲染
我們再在檢視下vue
原始碼
原始碼位置:\vue-dev\src\compiler\codegen\index.js
1 2 export function genElement (el: ASTElement, state: CodegenState): string { 3 4 if (el.parent) { 5 6 el.pre = el.pre || el.parent.pre 7 8 } 9 10 if (el.staticRoot && !el.staticProcessed) { 11 12 return genStatic(el, state) 13 14 } else if (el.once && !el.onceProcessed) { 15 16 return genOnce(el, state) 17 18 } else if (el.for && !el.forProcessed) { 19 20 return genFor(el, state) 21 22 } else if (el.if && !el.ifProcessed) { 23 24 return genIf(el, state) 25 26 } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { 27 28 return genChildren(el, state) || 'void 0' 29 30 } else if (el.tag === 'slot') { 31 32 return genSlot(el, state) 33 34 } else { 35 36 // component or element 37 38 ... 39 40 }
在進行if
判斷的時候,v-for
是比v-if
先進行判斷
最終結論:v-for
優先順序比v-if
高
三、注意事項
-
永遠不要把
v-if
和v-for
同時用在同一個元素上,帶來效能方面的浪費(每次渲染都會先迴圈再進行條件判斷) -
如果避免出現這種情況,則在外層巢狀
template
(頁面渲染不生成dom
節點),在這一層進行v-if判斷,然後在內部進行v-for迴圈
1 2 <template v-if="isShow"> 3 4 <p v-for="item in items"> 5 6 </template> 7 如果條件出現在迴圈內部,可通過計算屬性computed提前過濾掉那些不需要顯示的項 8 9 10 computed: { 11 12 items: function() { 13 14 return this.list.filter(function (item) { 15 16 return item.isShow 17 18 }) 19 20 } 21 22 }
參考文獻
https://vue3js.cn/docs/zh
轉載至:https://blog.csdn.net/weixin_44475093/article/details/110607035