v for和v if優先順序

原始碼位置vue/src/complier/codegen/index.js

function genelement (el: astelement, state: codegenstate): string 

if(el.staticroot && !el.staticprocessed)
else
if(el.once && !el.onceprocessed)
else
if(el.
for && !el.forprocessed)
else
if(el.
if && !el.ifprocessed)
else
if(el.tag === 'template' && !el.slottarget && !state.pre)
else
if(el.tag === 'slot'
)else
else
const children = el.inlinetemplate ? null : genchildren(el, state, true)
code = `_c(
'$'$` : ''//
data
}$` : ''
// children
})`    }
// module transforms
for(let i = 0; i < state.transforms.length; i++
)return code
}}

在處於同一節點的時候，v-

for 優先順序比 v-
if 高。
這意味著 v-
if 將分別重複執行於每個 v-
for 迴圈中。
即——先執行v-
for 的迴圈，然後在每乙個v-
for 的迴圈中，
再進行 v-
if 的條件對比。所以，不推薦v-
if和v-
for同時使用。

vue中的內建指令都有相應的解析函式，執行順序是通過簡單的

ifelse
-if語法來確定的。在genfor的函式裡，
最後會return乙個自執行函式，再次呼叫genelement。
雖然v-
for和v-
if可以放一起，
但我們要避免這種寫法，在官網中也有明確指出，這會造成效能浪費。

for=

"(item, index) in list"
:key=
"index"
>
"item.isshow"
>
}<
/div>
<
/template>

for=
"(user,index) in activeusers"
:key=
"user.index"
>
}<
/div>
<
/div>
<
/template>
export
default,]
};},
computed:)}
}};<
/script>

v if 和v for的優先順序

當v if與v for一起使用時，v for具有比v if更高的優先順序，這意味著v if將分別重複執行於每個v for迴圈中 所以，不推薦v if和v for同時使用 for user in activeusers key user.id li ul 或者 shouldshowusers for ...

v for與v if的優先順序

一般我們在兩種常見的情況下會傾向於這樣做 詳解當 vue 處理指令時，v for比v if具有更高的優先順序，所以這個模板 v for user in users v if user.isactive key user.id li ul 將會經過如下運算 this.users.map functio...

面試被問到v if和v for同時使用優先順序的問題

關於vue中v if 與v show 和v for的提問 v for和v if的優先順序，v for的要高，為什麼我看不懂原始碼，看了官方文件，只知道最好不要放一起使用 因為優先順序高的問題，即便滿足了v if條件的被隱藏了。其實v for也將資料渲染到dom了，如果資料多重繪dom 也是影響效能吧...