Fundamental Differences Between React and Vue

Nowadays, front-end frameworks are like much-needed cheese in a pizza. Without them, it is very difficult for the pizza to reach your silver tongue. And Vue and React are like two types of Mozzarella cheese in web app development. In this article, however, we won’t discuss their taste, rather how they work and differ fundamentally.

Library vs Framework

The first difference to be understood is that React is a library and Vue is a framework. So what does that mean exactly? When you use a library, you are in charge of the flow of the application. You can call a method from the library wherever you want on the life-cycle. But when you are using a framework, the framework is in charge of the flow. It provides some places where you plug in your code, but you don’t get to decide when and where they will be invoked. The difference is subtle and lies in the term ‘inversion of control’. Take a look at the following code snippets:

Both of them are Hello components, the first is in React and the other is in Vue. In React, the developer is directly deciding whether to display the ‘Wave’ button or not by using !waved && ... logic. This is plain javascript, there is no third party control. But in Vue, the same thing is done by v-if="!waved". With the v-if, the framework provides a placeholder to the developer to plug-in the logic. But the framework decides when to invoke that logic.

JSX vs Templating

React offers JSX to write components, which is an extension of plain javascript. Take a look at the line below:

const tag = <span className="tag">React</span>;

Is this HTML? Or a string? What is it? The answer is, JSX. Instead of creating an HTML dom, it creates a React-dom. ReactDOM.render(tag, ...) converts it into HTML dom. We will come back to this renderer function in a while. Babel translates the above code into the following to get the React-dom:

const tag = React.createElement(
  'span',
  { className: 'tag' },
  'React'
);

Vue, being an MVC framework, separates the view layer using good old HTML templating. In practice, any valid HTML code is also a valid template in Vue. On top of that, Vue takes an angular-like approach to offer attributes such as v-if, v-for, v-on, v-bind etc.

Separation of Renderer in React

At the very core, what React does is to maintain a dom-tree for you, which is also capable of computing node-diffs efficiently. Parsing all the JSX results in this tree, which is basically a large nested object of React nodes. This tree is then translated into HTML dom using ReactDOM.render.

Notice that, react-elements are not the same as HTML-elements. ReactDom.render translates the React-elements to HTML-elements later. To understand why this is a brilliant idea, we need to take a peek into React-native. You see, in a web-app, your browser renders the dom. But in your native mobile app, you are not seeing things in your browser. Here, the virtual-dom-tree must be translated into something that your phone’s OS can draw. That’s where React-native comes in. It takes the same dom-tree you created and translates it for native OS’s UI. You will find that there is a Vue-native that exists, but it's an adapter for Vue to work with React-native. It converts Vue components into React-elements and then the rest is up to React-native.

State Management

State is a set of observable properties upon which depends the view. Any change in state triggers the render-cycle of both React and Vue. However, both of them manage states differently.

In React, state is considered immutable. As a result, reassigning a state variable (i.e. this.state.msg = ‘new value’) does not trigger render-cycle. To update state in React, you need to call the setState function (i.e. this.setState({msg: ‘new value’})), which sets the new state and triggers the render-cycle.

In Vue, each state-variable is given a getter and a setter using javascript’s Object.defineProperty. And the setter function sets the new value and triggers the render-cycle. As a result, merely reassigning a state variable is enough to update the state.

Summary

There is no clear winner between React and Vue, as their advantages and disadvantages are totally subjective to developers’ perspective, coding style and need. However, being a library, React gives more control to the developer, in contrast as a framework, Vue focuses on being more disciplined to make the development experience smooth.