VueJS: <template> vs <div> or related for grouping elements for conditional rendering
I doubt there is a performance change but a big difference is that the <template> node does not appear in the DOM.
This is an important distinction especially when grouping children that are the only valid node types for their parent such as list items, table rows, etc:
This is valid:
<ul> <template v-if="something"> <li>Text</li> <li>Text</li> </template></ul>This is not:
<ul> <div v-if="something"> <li>Text</li> <li>Text</li> </div></ul>