How Vue differs from React and Angular

Introduction

Vue is a tool to build websites and apps. It is different from React and Angular in how it works and how easy it is to learn.

When you want a simple and gentle way to start building interactive web pages.

When you prefer writing code that looks like regular HTML with some extra features.

When you want a flexible tool that can be used for small parts or whole apps.

When you want to use the latest Vue features like the Composition API for better code organization.

When you want a framework that balances ease of use and powerful features.

Syntax

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

Vue uses <template> for HTML, <script setup> for logic, and ref to create reactive data.

Vue's syntax is close to normal HTML, making it easy to understand for beginners.

Examples

Simple Vue component showing how to display a variable in HTML.

Vue

<template>
  <p>Hello, {{ name }}!</p>
</template>
<script setup>
const name = 'Vue'
</script>

Button that increases a number when clicked using Vue's reactive ref.

Vue

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

Sample Program

This Vue component shows a message and a button. When you click the button, the message changes. It uses Vue's reactive ref and event handling.

Vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello from Vue!')
function changeMessage() {
  message.value = 'You clicked the button!'
}
</script>
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me</button>
  </div>
</template>

Important Notes

Vue uses a template system that looks like HTML, which is easier for beginners compared to React's JSX.

Vue's Composition API allows organizing code by feature, unlike Angular's more rigid structure.

Vue is lighter and simpler to set up than Angular, which is a full framework with many built-in features.

Summary

Vue is easy to learn because it uses HTML-like templates and simple reactive data.

React uses JSX and focuses on components as functions, while Angular is a full framework with more rules.

Vue offers a balance between simplicity and power, making it great for many projects.