Get An Estimate
React and Vue.js similarities

With the abundance of web frameworks available today, it’s fascinating to observe how some of them share striking similarities. In this article, we’ll talk about the similarities between two frameworkds: React and Vue.js. I’ve been working with React a long time now, but I found myself just into the Vue.js world upon transitioning to a new company. At the conclusion of this article, I’ll share my personal preference between the two frameworks. Let’s see together some similarities on their features and maybe this article help you out to make a smoother transition for those familiar with one framework and seeking to move to the other.

While React and Vue.js may diverge in various aspects, it’s remarkable how certain features align in functionality under different names. For convenience, I’ll denote React features with (R) and Vue.js features with (V).

In React, we use the useState hook to add a state variable to our component and we do the same in Vue.js by using refs.

Moreover, we can use refs from Vue.js the same way as the useRef hook from React when we want to access DOM elements.

I know, I know you might be thinking to hell with multiple, and maybe incorrect useEffects, but don’t worry, I’ll keep it simple here to point out the similarity, nothing else. So, there is a second parameter in the useEffect hook which is called dependencies and it’s a list of all reactive values references inside of the setup code. Basically, it watches the values inside that list, which is the thing that watch from Vue.js does.

The concept of nested components within a parent component, encapsulated as the Children prop in React, finds its counterpart in Vue.js’ Slots. Notably, Vue.js’ Slots offer the advantage of dynamic slot names.

Both frameworks introduce mechanisms to avoid prop drilling. The useContext hook helps you read and subscribe to the context you want. You have first to create the context with createContext and then use the context with useContext. While in Vue.js you can inject data provided by an ancestor component by using the inject() function and to provide the data by using the provide() function.

Naming here for both frameworks is amazing, and naming in programming is known that it’s hard. createPortal it’s just like creating a magic portal to somewhere in the DOM to throw your component. Teleport does the same job, it teleports your component to somewhere in the DOM. We usually create portals when we want to render elements on top of each other, most of the times those elements are modals.

I love writing frontend code and I really like both frameworks but to be honest I like React more. Maybe the reason is that I’ve been working more time with React. Nevertheless, I needed to learn Vue.js and the truth is, I wanted to learn it too. It has many advantages and many things that might make them better than React.

Also, regarding React, there are some good news from the React teams that they will do an update and it will be a major version which will be the React 19.

© 2022 Vausm Technologies Private Limited

Log in with your credentials

Forgot your details?