Should You Choose VueJS Over React?

  • 2019-04-09 01:13 AM
  • 107

In this article, I would like to share my views on why I have become a big fan of Vue. I will try to be unbiased as much as possible. So, this in my own opinionated take on the question. Here’s why.

List elements

One of the most common element in a web app is to render a list element given an array. Let’s see the syntax in Vue and React.

React

<ul>
  {
    dataArray.map(data,i)=> <li key={i}>{data}</li>)
  }
</ul>
List in React

Vue

<ul>
	<li v-for="(data,i) in data" :key="i">
		{{data}}
	</li>
</ul>
List in Vue

Now which looks more simpler, React’s jsx syntax or Vue’s html, you decide. 
I prefer the cleaner vue’s syntax.

Component Skeleton Structure

Below is the basic component syntax written in both.

class myComponent extends Component{
	constructor(){
		this.state = {
			data:['Mango','Grapes','Guava']
		}
	}
	render(){
		const { data } = this.state;
		return <ul>
		{
			data.map((data,i) =>
				<li key={i}>
					{data}
				</li>
			)
		}
		</ul>
	}
}
React Component
<template>
	<ul>
		<li v-for="(data,i) in data" :key="i">
			{{data}}
		</li>
	</ul>
</template>

<script>
	export default {
		data:()=>({
			data:["Mango","Grapes","Guava"]
		})
	}
</script>
Vue component

Writing components should be simple with clear distinction in javascript part and html. Things look mixed up in react’s syntax (again completely my opinion).

Component Lifecycles

In React we have

  • constructor
  • componentWillMount
  • componentDidMount
  • componentWillUpdate
  • componentDidUpdate
  • render

Distinguishing between each of them becomes quite confusing for a newbie and i don’t blame them. Sheer number of lifecycles is a bit too much. Now in which lifecycle should we do an api call for fetching data.

In Vue we have

  • created
  • mounted
  • updated
  • beforeCreate
  • beforeMount
  • beforeUpdate

Simple enough and all of them make sense. Most often we have to deal with created or mounted lifecycle.

Event handling

Event handling should be very simple and straight forward since it is one of the most used feature of any javascript framework. Lets see how React and Vue handle this.

class myComponent extends Component{
	constructor(){
		this.state = {
			data:['Mango','Grapes','Guava']
		}
		this.handleClick = this.handleClick.bind(this);
	}
	handleClick(){
		console.log('list clicked')
	}

	render(){
		const { data } = this.state;
		return <ul onClick={this.handleClick}>
		{
			data.map((data,i) =>
				<li key={i}>
					{data}
				</li>
			)
		}
		</ul>
	}
}
click event handling in react
<template>
	<ul @click="handleClick">
		<li v-for="(data,i) in data" :key="i">
			{{data}}
		</li>
	</ul>
</template>

<script>
	export default {
		data:()=>({
			data:["Mango","Grapes","Guava"]
		}),
		methods:{
			handleClick(){
				console.log('list clicked')
			}
		}
	}
</script>
click event handling in vue

Vue provides very simple syntax for handling events where as in react, using this keyword then binding this in constructor seems unnecessary for a simple click handler.

Computed properties

Before wrapping, i would like to highlight one of the awesome feature that vue provides, computed property.

Lets say we have a prop called, dollars and we have to render converted rupees in ui. This becomes very simple with computed property. Below is how we’ll use it

<template>
	<span>{{dollar}}$ in Rupees is ₹{{rupees}}</span>
</template>

<script>
	export default {
		props:{
			dollar:Number
		},
		computed:{
			rupees(){
				return this.dollar * 68;
			}
		}
	}
</script>
computer property in Vue

In my opinion, Vue is simpler than other current frameworks and thus makes the learning process easier not overwhelming. Hope you liked the article. If you did, please share a clap. Please feel free to suggest your own insights! Thanks for reading…

Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!
Follow me on Facebook | Twitter

Learn more

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Nuxt.js - Vue.js on Steroids
Build Web Apps with Vue JS 2 & Firebase
React - The Complete Guide (incl Hooks, React Router, Redux)
Modern React with Redux [2019 Update]
Building a Desktop App with Vue: NW.js
Build a Progressive Web App In VueJs
JavaScript Basics Before You Learn React
Build Progressive Web Apps with React

Originally published by Abhay Srivastav at https://blog.bitsrc.io

Suggest