Vue.js for React Developers: A Hands-On Guide

You're a React developer. You've mastered hooks, understood the virtual DOM, and can debug re-renders in your sleep. But you keep hearing about Vue: how it's easier to learn, has automatic reactivity, and requires less boilerplate. Is the grass really greener?

This guide is for you. We'll explore Vue 3's Composition API, reactivity system, and template syntax through interactive comparisons with React. I'm not here to sell you on Vue. I'm here to show you how it works and where it differs from React, so you can decide for yourself.

Why Learn Vue as a React Developer?

Understanding multiple frameworks makes you a better developer. You'll recognize patterns, make better architectural decisions, and understand the trade-offs behind React's design choices. Plus, you might discover you prefer Vue for certain projects.

Vue and React solve the same problems (reactive UIs, component composition, state management) but with different philosophies. React gives you JavaScript for everything (JSX). Vue separates templates from logic. React requires manual dependency tracking (useMemo, useEffect). Vue uses Proxies for automatic tracking.

Part 1: Reactivity - Proxy Magic vs Manual Dependencies

How React Handles Reactivity

React uses explicit state setters. When you call setState, React knows something changed and schedules a re-render:

const [count, setCount] = useState(0);
 
// React doesn't "watch" count
// You must call setCount to trigger updates
setCount(count + 1);

For derived state, React requires manual dependency arrays:

const fullName = useMemo(() => {
  return `${firstName} ${lastName}`;
}, [firstName, lastName]); // You list dependencies manually

How Vue Handles Reactivity

Vue wraps your state in a JavaScript Proxy that intercepts all reads and writes:

const count = ref(0);
 
// Vue's Proxy detects this write automatically
count.value++;

For derived state, Vue automatically tracks what you access:

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
}); // No dependency array needed!

Key differences:

• React requires manual dependency arrays in useMemo. Any state change can trigger re-renders. You must remember to list all dependencies.
• Vue automatically tracks which properties are accessed. Only dependent computations re-run when data changes. No manual dependency management needed.

Understanding Proxy-Based Reactive Systems

What exactly is a Proxy, and how does Vue use it for reactivity? A JavaScript Proxy is an object that wraps another object and intercepts operations performed on it. Think of it as a middleman that can watch and control access to your data.

How it works:

• Proxies intercept property access (get) and modification (set)
• Vue wraps your state in a Proxy to track all reads and writes
• When you read state.count, Vue knows you depend on it
• When you write state.count = 5, Vue re-renders components that read it

Side-by-Side: useState vs ref()

Both create reactive state, but with different APIs:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">
      Increment
    </button>
  </div>
</template>

Key differences:

• React: Returns [value, setter]. Use value directly. Call setter to update. Setter can take updater function.
• Vue: Returns ref object. Access via .value in script. Directly mutate .value. Auto-unwrapped in templates.

// In script setup:
const count = ref(0);
count.value++; // .value required
 
// In template:
<div>{{ count }}</div> <!-- NO .value needed -->

Side-by-Side: useMemo vs computed()

Derived state works similarly, but Vue eliminates the dependency array:

import { useState, useMemo } from 'react';

function UserProfile() {
  const [firstName, setFirstName] = useState('Jane');
  const [lastName, setLastName] = useState('Smith');
  const [age, setAge] = useState(25);

  // Manual dependency array required
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]); // Must list deps

  return <h1>{fullName}</h1>;
}

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('Jane');
const lastName = ref('Smith');
const age = ref(25);

// Automatically tracks dependencies
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
}); // No dependency array needed!
</script>

<template>
  <h1>{{ fullName }}</h1>
</template>

Key differences:

• React: You must manually specify [firstName, lastName]. Forget one? Stale data or infinite loops.
• Vue: Automatically tracks that you accessed firstName.value and lastName.value. No manual work.
• Result: Vue's computed is less error-prone and more maintainable.

Part 2: Composition API vs React Hooks

Both Vue 3's Composition API and React Hooks move away from class components toward function-based composition. They're surprisingly similar!

The Evolution Story

React (2013): Classes with lifecycle methods → Hooks (2019) for functional components

Vue (2014): Options API (data, methods, computed) → Composition API (2020) for better composition

Both frameworks recognized that grouping code by feature (not lifecycle) is more maintainable.

script setup: Vue's Concise Syntax

React function components look like this:

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
export default Counter;

Vue's <script setup> is more concise:

<script setup>
import { ref } from 'vue';
 
const count = ref(0);
</script>
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

React patterns:

• Function components return JSX
• Hooks must follow Rules of Hooks
• State with useState
• Effects with useEffect
• Everything in JavaScript

Vue patterns:

• <script setup> auto-exposes to template
• No special hook rules
• State with ref/reactive
• Effects with watch/watchEffect
• Separate script and template

Lifecycle Hooks: More Granular in Vue

React combines mount, update, and unmount into useEffect:

useEffect(() => {
  console.log('Mounted or updated');
 
  return () => console.log('Cleanup');
}, [dependency]); // Runs when dependency changes

Vue separates each phase:

onBeforeMount(() => console.log('About to mount'));
onMounted(() => console.log('Mounted'));
onBeforeUpdate(() => console.log('About to update'));
onUpdated(() => console.log('Updated'));
onBeforeUnmount(() => console.log('About to unmount'));
onUnmounted(() => console.log('Unmounted'));

Key difference:

• React: useEffect combines mount, update, and unmount. Deps array controls when it runs.
• Vue: Separate hooks for each phase (onMounted, onUpdated, onUnmounted) for clarity.
• Vue Advantage: More granular control - you can run code specifically before/after mount or update.

Side Effects: useEffect vs watch()

React's useEffect is general-purpose for all side effects:

useEffect(() => {
  console.log('searchQuery changed:', searchQuery);
 
  const timeout = setTimeout(() => {
    saveToLocalStorage(searchQuery);
  }, 300);
 
  return () => clearTimeout(timeout); // Cleanup
}, [searchQuery]); // Manual dependency

Vue's watch is specifically for watching reactive data:

watch(searchQuery, (newValue, oldValue) => {
  console.log('searchQuery changed:', newValue);
 
  const timeout = setTimeout(() => {
    saveToLocalStorage(newValue);
  }, 300);
 
  // Cleanup via onInvalidate
  return () => clearTimeout(timeout);
}); // Automatic tracking

import { useState, useEffect } from 'react';

function Search() {
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    // Run whenever searchQuery changes
    console.log('Query changed:', searchQuery);

    const timeout = setTimeout(() => {
      localStorage.setItem('query', searchQuery);
    }, 300);

    // Cleanup function
    return () => clearTimeout(timeout);
  }, [searchQuery]); // Manual dependency

  return <input value={searchQuery} />;
}

<script setup>
import { ref, watch } from 'vue';

const searchQuery = ref('');

watch(searchQuery, (newQuery, oldQuery) => {
  // Automatically tracks searchQuery
  console.log('Query changed:', newQuery);

  const timeout = setTimeout(() => {
    localStorage.setItem('query', newQuery);
  }, 300);

  // Cleanup (onInvalidate)
  return () => clearTimeout(timeout);
});
</script>

<template>
  <input v-model="searchQuery" />
</template>

Comparison:

React useEffect:

• General-purpose effect hook
• Requires dependency array
• Runs after every render (if deps change)
• Return cleanup function

Vue watch:

• Specifically for watching data
• Automatically tracks source
• Gets old and new values
• Built-in cleanup via onInvalidate

Part 3: Template Syntax vs JSX

This is where React and Vue diverge most philosophically.

Conditional Rendering: && and ?: vs v-if

React uses JavaScript expressions:

{show && <div>Message is visible!</div>}
 
{mode === 'A' ? <ComponentA /> : <ComponentB />}

Vue uses template directives:

<div v-if="show">Message is visible!</div>
 
<ComponentA v-if="mode === 'A'" />
<ComponentB v-else />

function Conditional() {
  const [show, setShow] = useState(false);
  const [mode, setMode] = useState('A');

  return (
    <div>
      {/* Conditional rendering with && */}
      {show && <div>Message is visible!</div>}

      {/* Ternary for if/else */}
      {mode === 'A' ? (
        <ComponentA />
      ) : (
        <ComponentB />
      )}
    </div>
  );
}

<script setup>
import { ref } from 'vue';

const show = ref(false);
const mode = ref('A');
</script>

<template>
  <div>
    <!-- v-if directive -->
    <div v-if="show">Message is visible!</div>

    <!-- v-if with v-else -->
    <ComponentA v-if="mode === 'A'" />
    <ComponentB v-else />
  </div>
</template>

Vue's additional directives:

• v-if / v-else-if / v-else - Full conditional rendering
• v-show - Toggle CSS display (element stays in DOM)
• React: Only {expression && <JSX />} or ternary operator

List Rendering: .map() vs v-for

React uses JavaScript's .map():

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

Vue uses the v-for directive:

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

<script setup>
import { ref } from 'vue';

const items = ref([...]);
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

Two-Way Binding: Controlled Inputs vs v-model

Vue is particularly concise here.

React requires explicit value + onChange:

<input
  type="text"
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

Vue's v-model is syntactic sugar:

<input type="text" v-model="text" />

import { useState } from 'react';

function Form() {
  const [text, setText] = useState('');
  const [checked, setChecked] = useState(false);
  const [selected, setSelected] = useState('apple');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />

      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />

      <select
        value={selected}
        onChange={(e) => setSelected(e.target.value)}
      >
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
    </div>
  );
}

<script setup>
import { ref } from 'vue';

const text = ref('');
const checked = ref(false);
const selected = ref('apple');
</script>

<template>
  <div>
    <input type="text" v-model="text" />

    <input type="checkbox" v-model="checked" />

    <select v-model="selected">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
    </select>
  </div>
</template>

React (Controlled):

• Explicit value prop
• Explicit onChange handler
• More verbose but clear
• Full control over updates

Vue (v-model):

• Syntactic sugar
• Auto-binds value + @input
• Concise and clean
• Less boilerplate

<input v-model="text" />
 
<!-- Expands to: -->
<input
  :value="text"
  @input="text = $event.target.value"
/>

DOM Refs: useRef vs Template Refs

Both frameworks let you access DOM elements directly:

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  );
}

<script setup>
import { ref } from 'vue';

const inputRef = ref(null);

const focusInput = () => {
  inputRef.value?.focus();
};
</script>

<template>
  <div>
    <input ref="inputRef" />
    <button @click="focusInput">
      Focus Input
    </button>
  </div>
</template>

React useRef:

• Create with useRef(null)
• Attach with ref={inputRef}
• Access via inputRef.current
• Works for DOM and values

Vue template ref:

• Create with ref(null)
• Attach with ref="inputRef"
• Access via inputRef.value
• Template refs are reactive

const count = ref(0);      // Reactive state
const inputRef = ref(null); // DOM ref

Part 4: Component Lifecycle & Deeper Concepts

Let's dig into how components mount, update, and unmount in both frameworks.

Mounting Phase: Step by Step

Vue has more granular hooks (onBeforeMount, onMounted) while React combines everything into useEffect with an empty dependency array.

Update Phase: How Changes Propagate

When state changes, both frameworks:

1. Detect the change
2. Re-render the component
3. Diff the virtual DOM
4. Update only changed DOM nodes

Parent-Child Communication: Props & Events

Both use "props down, events up" pattern:

// Parent Component
function Parent() {
  const [count, setCount] = useState(0);

  const handleIncrement = (value) => {
    setCount(count + value);
  };

  return (
    <Child count={count} onIncrement={handleIncrement} />
  );
}

// Child Component
function Child({ count, onIncrement }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => onIncrement(1)}>+1</button>
      <button onClick={() => onIncrement(5)}>+5</button>
    </div>
  );
}

<!-- Parent Component -->
<script setup>
import { ref } from 'vue';

const count = ref(0);

const handleIncrement = (value) => {
  count.value += value;
};
</script>

<template>
  <Child :count="count" @increment="handleIncrement" />
</template>

<!-- Child Component -->
<script setup>
defineProps(['count']);
const emit = defineEmits(['increment']);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="emit('increment', 1)">+1</button>
    <button @click="emit('increment', 5)">+5</button>
  </div>
</template>

React pattern:

• Props down via attributes
• Events up via callback props
• onEventName convention
• Direct function calls

Vue pattern:

• Props down via :propName
• Events up via @eventName
• defineEmits() in child
• emit() to trigger events

React passes callbacks as props (onEventName convention). Vue uses defineEmits() and emit() for explicit event declarations.

Cleanup and Unmounting

Both frameworks let you clean up side effects (timers, subscriptions, etc.):

useEffect(() => {
  const timer = setInterval(...);

  // Cleanup function
  return () => {
    clearInterval(timer);
  };
}, []);

onMounted(() => {
  const timer = setInterval(...);
});

onUnmounted(() => {
  clearInterval(timer);
});

React uses useEffect cleanup functions. Vue has a dedicated onUnmounted hook. Same functionality, different API.

When to Choose What?

Key Takeaways

Your Next Steps

If you're coming from React and want to try Vue:

1. Official Docs: vuejs.org - Excellent tutorial
2. Try It: Build the same component in React and Vue
3. Play with Proxies: Understanding reactivity is key
4. Explore Pinia: Vue's state management (similar to Redux/Zustand)

If you decide Vue isn't for you, that's fine! You've learned about alternative approaches to reactivity, templates, and lifecycle management. This knowledge makes you a better React developer.

Final Thoughts

Vue and React are both excellent frameworks. React's philosophy is "it's just JavaScript": full control, explicit everything. Vue's philosophy is "make it easy": automatic reactivity, less boilerplate, clearer separation.

Neither is objectively better. It depends on your team's experience, project requirements, personal preference, and ecosystem needs.

The best developers understand why frameworks make different choices. Now you do.