Vue vs React: Programming Styles, View Syntax, Components, Routing, State Management, Reactivity and Lifecycle Comparison

The article offers a detailed technical comparison of the two major front‑end frameworks, Vue and React, examining how they differ in programming style, view syntax, component architecture, routing, state management, basic features, reactivity, lifecycle hooks and side‑effect handling.

Programming style : Vue relies on concise directives and template syntax (e.g., <input v-model="username"/>), while React uses explicit JavaScript and JSX (e.g.,

<input value={username} onChange={e => setUsername(e.target.value)}/>

). Event handling also differs: Vue can call a method directly in @click, whereas React often requires a higher‑order function to pass parameters.

<input v-model="username"/>

<input value={username} onChange={e => setUsername(e.target.value)}/>

View style : Vue templates are written inside <template> blocks that resemble plain HTML, while React uses JSX which is JavaScript‑based and requires camel‑cased attributes and explicit closing tags. Conditional rendering examples illustrate the flexibility of JSX compared with Vue's template directives.

<template>
  <h1 v-if="level === 1">Title 1</h1>
  <h2 v-if="level === 2">Title 2</h2>
</template>

let App = () => {
  const level = 1;
  const Tag = 'h' + level;
  return (
    <div>{<Tag>Title {level}</Tag>}</div>
  );
};

Component style : Vue 2 uses the Options API with this, which can be less flexible; Vue 3 introduces the Composition API that avoids this and encourages function‑based logic. React before version 16.8 relied on class components (with this), while newer versions favor function components and hooks, mirroring Vue 3's composition approach.

<template>
  <div class="my-component"><!-- HTML template --></div>
</template>
<script>
export default {
  // JavaScript code
}
</script>
<style>
.my-component { /* CSS */ }
</style>

import React from 'react';
import './MyComponent.css';
function MyComponent() {
  // JavaScript code
  return (
    <div className="my-component">{/* HTML template */}</div>
  );
}
export default MyComponent;

Routing style : Vue uses vue-router with composable helpers like useRouter and useRoute. React uses react-router-dom with components such as BrowserRouter, Switch, Route, and hooks like useHistory and useParams.

// Vue main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

const app = createApp({});
app.use(router);
app.mount('#app');

// React router example
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useHistory, useParams } from 'react-router-dom';

const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

const Home = () => {
  const history = useHistory();
  const goToAbout = () => history.push('/about');
  return (<div><h1>Home Page</h1><button onClick={goToAbout}>Go to About</button></div>);
};

const About = () => {
  const { id } = useParams();
  return (<div><h1>About Page</h1><p>Param: {id}</p></div>);
};

export default App;

State‑management style : Vue adopts framework‑specific libraries ( Vuex or Pinia) whose APIs are tightly coupled to Vue. React typically uses framework‑agnostic solutions such as Redux or MobX. The article outlines differences in API design, data flow (unidirectional in Redux vs store‑centric in Vuex/Pinia), async handling (middleware vs actions), and configuration overhead.

// Pinia store example
import { defineStore } from 'pinia';
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++; }
  }
});

// Redux Toolkit store example
import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) { state.count++; }
  }
});
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });
export const { increment } = counterSlice.actions;

Basic feature comparison : The article briefly contrasts template syntax, styling approaches (Vue supports string, array and object styles; React uses object style and className strings), event handling, form binding (Vue’s v-model vs React’s controlled components), component communication (props + emits in Vue, props + callback in React), logic reuse (mixins/composition API vs HOC/render props/hooks), content distribution (slots vs props.children), and DOM access (both use ref).

Reactivity and lifecycle : Vue’s reactivity is built on Proxy, offering fine‑grained tracking, while React relies on state updates via setState or hooks. Lifecycle hooks are richer in Vue (e.g., beforeCreate, mounted) compared with React’s simpler set ( constructor, componentDidMount, componentWillUnmount). Side‑effect handling differs: Vue uses watchEffect that auto‑tracks dependencies, whereas React uses useEffect which requires an explicit dependency array.

// Vue watchEffect example
watchEffect(cb => {
  cb(() => {
    // cleanup before update
  });
});

// React useEffect example
useEffect(() => {
  return () => {
    // cleanup before unmount or update
  };
}, []);

Overall, both frameworks are moving toward functional, hook‑based patterns, emphasizing composability, reduced reliance on this, and more declarative state handling.