Generating items with v-for and v-if, best approach?


I am not sure what would be the better approach in the following case:

I have an array of items, using which I want to generate a menu. I need to generate it something like

<div v-for="item in items" :key="">
    <i class="item.className" />
    <span>{{ }}</span>

    <div v-if="item.isSearch">
           here is some complex structure of html to generate the search box and assoicated stuff like its helper modals, errors etc.

Now the issue is that items is an Array of around 100 items but only one item has isSearch:true. I know if we are using v-if the node/component is only mounted if the condition is true.

But the question is does it still generate some in-memory code for that node? If its generating the code in-memory is there any way to avoid it? Becoz it looks like that 99 un-used component code is generated in memory for which I never need to show the html.


v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

So those unused components will not be rendered in your html.

The point is not about rendering or not rendering! My concern is that in this example the vue is creating its VNodes in memory, and if isSearch is changed to true for any of the item it will generate the html from memory!