Building the Same Component in Vue2 vs. Vue3
With the release of Vue3 coming soon, many people are wondering “What’s different in Vue2 vs. Vue3?”
Although we’ve written articles before about the biggest changes coming, we haven’t really taken a deep look at exactly how our code will change. So to show these changes, we’re going to build a simple form component in both Vue2 and Vue3.
By the end of this article, you’ll understand the main programming differences between Vue2 and Vue3 and be on your way to becoming a better developer.
If you want to know how to build your first Vue3 app, check out our beginners’ Vue3 Alpha app guide.
Alright — let’s go!
Creating our Template
For most components, the code will be very similar, if not identical, in both Vue2 and Vue3. However, Vue3 has support for Fragments, meaning that components can have more than one root node.
This is especially useful when rendering components in a list to remove unnecessary wrapper div elements. However, in this case, we’ll keep a single root node for both versions of our Form component.
<template>
<div class='form-element'>
<h2> {{ title }} </h2>
<input type='text'…