v if和v for為什麼不要使用在同乙個元素上

2021-10-19 10:06:41 字數 511 閱讀 3240

vue官方強烈建議不要將v-for和v-if用在同乙個元素上

因為v-for比v-if有更高的優先順序,所以即使只是需要通過v-if來渲染一部分內容,也需要在每次重新渲染的時候遍歷整個列表,而不考慮需要的內容是否發生了變化,所以不在同乙個元素上同時使用v-for和v-if是一種提公升效能的手段

當然:需要進行這類操作一般分為兩種情形:

例:

可以這樣改寫:

定義乙個計算屬性去過濾列表,然後使用v-for去遍歷計算屬性

computed:)}

}

更改模板:

改寫之後有以下好處:

將v-if判斷新增在其包裹容器上,就不需要每次都檢查每一項的showusers屬性,而是只檢查它一次,且不會在showusers為false的時候進行v-for運算

不要在v for中使用v if

一 前言 以下 寫法,相信80 的初學者寫過,即使沒寫過,也應該見過!v for product in products key product.id v if product.price 50 li ul 使用 v if 來過濾 v for 迴圈的資料是乙個超級大錯誤!儘管這看起來很直觀,但它會導...

為什麼盡量不要使用eval函式和with關鍵字

編譯過程 分詞 詞法分析 解析 語法分析 生成 詞法作用域 定義在詞法階段的作用域 作用域 是一套規則,定義了引擎如何在作用域中通過識別符號名稱對變數進行查詢 作用域工作模型 詞法作用域 動態作用域 詞法化 編譯器工作的第一階段,即對 中的字元進行檢查。如果是有狀態的解析還會賦予單詞語義1.效能問題...

為什麼避免 v if 和 v for 用在一起?

官方文件中的例子只是給了 的一部分,經過自己的摸索,差不多寫出乙個可以更好解釋這個問題的需求,下面的原始碼 用vscode編寫 需求 有乙個陣列,存有多個物件,每個物件都有乙個屬性 isname true 或者 isname false。現在要遍歷每個陣列,實現isname true 時,顯示這個名...