VueJS is a JavaScript framework. With VueJS, you can write JavaScript that looks exactly like HTML, except the HTML has additional functionality, and it’s a lot easier to manage data and functions. You can create components, to break up a large application into smaller, easy-to-understand parts. I have used both ReactJS and VueJS. It sounds cheesy, but I almost felt guilty when using VueJS because it was so much easier than ReactJS. Like, programming shouldn’t be this easy, right?
In the VueJS HTML, you can loop through an array of data using special “HTML attributes.” It was very easy to reason about when using VueJS. It’s difficult to remember that you’re not using some advanced type of HTML when writing VueJS templates.
Why would you use VueJS instead of using vanilla Javascript?
There’s nothing wrong with using vanilla JS, but it can quickly get out of hand if your project gets to a certain point. JavaScript is a very flexible language, and it doesn’t have the same history as languages that have been mature for a longer amount of time.
Over time (and fairly recently), the front-end of websites have gotten just as complicated as the back end, but when you think of JavaScript, you’re probably not thinking of breaking out your code into several objects. If you do, the objects you pick probably won’t be the same as the objects someone else may pick. JavaScript also has many key differences between mature server-side languages, differences you probably wouldn’t take into account. When organizing a large JavaScript project, you might end up building an entire framework yourself, a framework that will only be used once. If you go down that path, you’ll probably find yourself re-inventing the wheel over, and over, and over again. You probably wouldn’t even realize it.
JavaScript has a strong connection with the DOM (the visible part of a web page), and VueJS takes that into account.
I have a couple favorite things about VueJS. One of favorite things is the tight connection between the Vue components and the Vuex state management library. The state, actions, and mutations are available globally in the components. No setup required. When using ReactJS, there’s a lot of setup to connect a React component to the Redux store, and you have to do that setup every single time.
Not that this whole article is a comparison of VueJS and ReactJS, but another one of my favorite things is the custom directives, like v-if to conditionally show an element and v-for to loop through an array. Looping through an array in JSX is very similar to looping through an array in plain JavaScript. Compared to RectJS, for loops in VueJS templates feel magical.
It’s really the small things that make all the difference. Because of those small things (Vuex and custom directives), I definitely recommend VueJS over ReactJS.
However, ReactJS is widely used, and it’s a good framework to learn, despite its cumbersome way of doing things. I’d recommend doing a project or two in React, just so you can tell a potential employer that you’ve used React. You could always do what I did. Build a project with ReactJS and then convert it to VueJS. It will give you a strong appreciation for the simplicity of VueJS.