v for與v if的優先順序

2022-06-23 21:15:08 字數 1615 閱讀 5723

一般我們在兩種常見的情況下會傾向於這樣做:

詳解當 vue 處理指令時,v-forv-if具有更高的優先順序,所以這個模板:

v-for="user in users"

v-if="user.isactive"

:key="user.id"

>

}li>

ul>

將會經過如下運算:

this.users.map(function (user) 

})

因此哪怕我們只渲染出一小部分使用者的元素,也得在每次重渲染的時候遍歷整個列表,不論活躍使用者是否發生了變化。

通過將其更換為在如下的一個計算屬性上遍歷:

computed: )

}}

v-for="user in activeusers"

:key="user.id"

>

}li>

ul>

我們將會獲得如下好處:

為了獲得同樣的好處,我們也可以把:

v-for="user in users"

v-if="shouldshowusers"

:key="user.id"

>

}li>

ul>

更新為:

v-for="user in users"

:key="user.id"

>

}li>

ul>

通過將v-if移動到容器元素,我們不會再對列表中的每個使用者檢查shouldshowusers。取而代之的是,我們只檢查它一次,且不會在shouldshowusers為否的時候運算v-for

反例

v-for="user in users"

v-if="user.isactive"

:key="user.id"

>

}li>

ul>

v-for="user in users"

v-if="shouldshowusers"

:key="user.id"

>

}li>

ul>

好例子

v-for="user in activeusers"

:key="user.id"

>

}li>

ul>

v-for="user in users"

:key="user.id"

>

}li>

ul>