Vuejs - Когда использовать v-for? v-HTML?

Question

При отображении списка элементов с помощью VueJS, очевидно, легко сделать, используя директиву v-for. То же самое можно сделать, используя свойство computed для возврата html и отображения с помощью v-html.

<ul> 
    <template v-for="item in items"> 
    <li><span class=myItem">{{ item }}</span></li> 
    </template> 
</ul> 

против

<div v-html="compiledHtmlList"></div> 

я заметил, для моего случая использования v-html делает список строк около 30К элементов несколько секунд быстрее, чем v-for. Поскольку я новичок в VueJS, задаюсь вопросом, ожидается ли разница в производительности, и если да, то почему? Если нет, есть ли другие причины для выбора одного над другим?

Answer 1

v-for медленнее загружать, но быстрее, когда список изменяется. v-html будет иметь более быстрое время загрузки, но время загрузки будет таким же, как время обновления.

Итак, если список статичен и не будет изменяться во время визуализации (например, список элементов, которые можно удалить), вы можете использовать v-html, но если этот список может измениться, используйте v -для.