不要在v for中使用v if

2021-10-14 16:44:11 字數 792 閱讀 6660

一、前言

以下**寫法,相信80%的初學者寫過,即使沒寫過,也應該見過!

>

v-for

="product in products"

:key

="product.id"

v-if

="product.price < 50"

>

} li

>

ul>

使用 v-if 來過濾 v-for 迴圈的資料是乙個超級大錯誤!儘管這看起來很直觀,但它會導致乙個巨大的效能問題。

二、原因

vuejs 優先考慮 v-for 而不是 v-if 指令,這意味著您的元件將迴圈遍歷每個元素,然後檢查 v-if 條件以確定是否應渲染。因此,實際上,無論條件是什麼,您都將遍歷陣列的每個專案。

三、解決方案

為避免上述問題,我們應該在遍歷模板中的資料之前對其進行過濾。在此,使用計算屬性來解決。

首先,我們只需要設定乙個計算屬性,為了獲得與之前的 v-if 相同的功能,**應如下所示。

v-for=

"products in productsunderfifty"

:key=

"product.id"

>

}<

/li>

<

/ul>

export

default;}

, computed:,}

,};<

/script>

不要在標頭檔案中使用using namespace

在這裡,我毫不迴避地說了這句話 引用我再也不想在任何標頭檔案中看到 using namespace 了 作為乙個開發者 團隊領導者,我經常會去招聘新的專案成員,有時候也幫助其他組的人來面試應聘者。作為應聘流程之一,我經常要求應聘者寫一些 因此我檢查過相當多的 在最近提交的c 中,我注意到乙個趨勢,在...

不要在 render 方法中使用 HOC

官方介紹 react 的 diff 演算法 稱為協調 使用元件標識來確定它是應該更新現有子樹還是將其丟棄並掛載新子樹。如果從 render 返回的元件與前乙個渲染中的元件相同 則 react 通過將子樹與新子樹進行區分來遞迴更新子樹。如果它們不相等,則完全解除安裝前乙個子樹。例子 下面有兩個計數器,...

不要在MySQL中使用「UTF 8」

mysql 從 4.1 版本開始支援 utf 8,也就是 2003 年,而今天使用的 utf 8 標準 rfc 3629 是隨後才出現的。舊版的 utf 8 標準 rfc 2279 最多支援每個字元 6 個位元組。2002 年 3 月 28 日,mysql 開發者在第乙個 mysql 4.1 預覽版...