'VueJS: <template> vs <div> or related for grouping elements for conditional rendering

In Vue.js, if you want to conditionally render multiple elements via a v-if/v-else-if directive you can wrap them inside <template> tags and apply the directive to the <template> tag, as explained here. However, you can also do the same with <div> tags wrapping the multiple elements. Are there any noticeable performance benefits to using <template> over <div> or any other similar native HTML5 tag?



Solution 1:[1]

I know that the question is quite old, but I found out one more thing

if you use divs - your div will be in DOM, but empty, if v-if is false and it can make some spaces looks like margins

if you use template - you don't have anything in DOM and it just don't appear

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maria Gileto