Vue.js for React devs: Who Wins the Burger Building Contest?
One key difference between React and Vue.js is that while React is primarily a library for building user interfaces, Vue.js aims to be a fully-fledged framework. This means that Vue.js comes with more out-of-the-box features and tools that enable developers to build complex applications with less configuration and setup.
Of course, as a React developer, you want to know the differences between React and Vue.js when creating components and interfaces, so let’s dive into the differences in syntax and usage between the two libraries. In this article I will compare React functional components with the Vue.js options API. We will come back to Vue’s compositions API in a future blog post, but for an overall comparison, the options API is easier to start with.
Let’s see how writing components differ between React and Vue.js. For that, we will use a simple example: let’s say we want to create a burger, which is one component that consists of different sub-components. A functional component in React could look something like this:
In Vue.js, a similar component could be created using a single-file component that includes a template, script, and style section, where the template section contains the HTML structure of the component, and the script section contains the component’s logic and exposes the component as the file’s default export. To use other components as child components, they must be imported and registered with the
We use props to pass information to child components and let components communicate with each other. In React, we read the props a component receives from the parameters of the functional component. To pass them to the child component, we add them to the JSX tag.
To pass props to child components in Vue.js, we have to use different “directives” that define certain forms of behavior for the component itself and its props. To bind the value of a prop to the component in one way, we need to use the
v-bind directive as a prefix, or its shorthand
:. Similar to the curly braces in React, we use this directive for any prop that is not a string.
To read the props a component receives, we must define each prop inside the
Often, we want to display certain elements depending on different conditions. To render JSX based on these conditions, we can use operators like
&& or use
if statements in React.
To conditionally render elements, Vue.js provides different directives such as
v-else (where the element is not rendered) or
v-show (which renders, but hides the element).
map that transform our data collection into a list of components.
As Vue.js provides another directive to achieve this goal. We can simply use the
v-for directive on a component that should be rendered as list element and pass an array to this prop.
Component State and Methods
To manage the state of a component, we primarily use the
useState hook in React. All the logic of a component is directly defined inside the component function itself.
In our example, we want to be able to modify the number of each ingredient in our burger. For that, we create a Builder that lets us select our preferred ingredients.
In Vue.js, the process of defining and modifying the state is quite simple, compared to React’s approach. The
data option initializes the state and exposes each member, which can be directly updated without the need for a setter function.
Component functions are defined inside the
methods option. Members of a component need to be accessed via
If we want to pass an event handler to a component in React, we first define a function that we pass as a prop to the respective JSX tag. We can simply pass this prop down the component tree and call the handler in the component that emits the event.
Passing event handlers in Vue.js works differently in some ways. To bind a handler to its event, we use the
v-on directive (
@ as shorthand). This handler is not passed down the component tree to the respective child. In order to bubble the event up the tree, each component has to emit a new event, and its parent can listen to it via the
Every React component goes through the same basic lifecycle — mount, update, and unmount. While we might use methods like
componentDidMount in class components, we use the
useEffect hook in functional components to respond to changes in props or state.
useEffect hook provides more flexibility, as it can be used to handle various actions, Vue.js provides more explicit hooks for handling actions in a component’s lifecycle. We are able to use methods such as
beforeUnmount. These methods offer a simple way to perform actions throughout the component’s lifecycle, and especially for beginners, they might be easier to understand than the proper usage of the
useEffect hook in React.
Watchers and Observables
In addition to lifecycle methods, Vue.js also offers an explicit concept to register to changes of a specific state. Where we might also use the
useEffect hook in React, that is, for example, called whenever a state changes, we can implement the
watch method inside a Vue component. The name of a watcher function always reflects the variable it depends on.
In some cases, we want to derive some value from the current value of a state in our component. Where we would use the
useMemo hook in React, Vue.js provides “computed properties”, that update dynamically whenever the value of a dependent state changes. Here, the dependencies do not have to be specified explicitly, like in React, Vue.js handles them implicitly.
Passing Child Elements
In many cases we want to nest components or content into other components. In React, we would nest this content inside the JSX tag of our component, which receives this content as
children prop which can then be rendered by the component.
In Vue.js we also simply nest the content into the tags of our component. However, inside the component, we have to define a
slot which determines where the child content should be rendered. In contrast to React, slots are more versatile and for example, allow us to define named slots as distinct placeholders for content that can be filled by the parent component.
In this article, I gave a quick overview of some similarities and differences between React and Vue.js to give you, as a React developer, an idea about how writing user interfaces in Vue.js can feel. Both libraries are great for building fast and lightweight interfaces, and none are superior to another. Choosing the right framework and libraries always depends on what you need and which style you prefer.
After working on projects both implemented with React and Vue.js, they both have their pros and cons. While Vue.js is easier to learn for people who are already familiar with HTML and CSS, the concept around HTML templates sometimes leads to more boilerplate and less comprehensible code. Especially in large applications, I was faced with the challenge to find ground in a large code base. React, on the other hand, has a steeper learning curve, but for me, it provides a more lightweight approach to build reusable components that scale well with a growing product.
Nevertheless, both libraries are great for building web interfaces, and provide rich ecosystems and active communities.
It’s time to build
At & we see the strengths and capabilities of both Vue.js and React. We understand that projects have different requirements and preferences. We choose the frameworks and libraries that fit best to the project, the client and the team to build web applications that are robust and scalable.
Let me know about your opinion and feel free to reach out if you have any questions.