Vue Intro

Vue Intro: Progressive Framework and Proxy Reactivity

Vue.js is an open-source JavaScript framework for building interactive user interfaces and single-page applications. You can drop Vue into an existing HTML page with a script tag or build a full application with Vite, Vue Router, and Pinia.

This progressive design means you only adopt the tools your project actually needs. Beginners start with plain HTML templates and reactive variables, then scale into modular components as the app grows.

flowchart LR
    A["State Mutation"] --> B["ES6 Proxy Handler"]
    B --> C["Dependency Tracking"]
    C --> D["Virtual DOM Diffing"]
    D --> E["DOM Patch and Render"]

Core Features of Vue 3

• Declarative Rendering: Vue binds JavaScript state directly to HTML templates using simple mustache syntax.
• Proxy-Based Reactivity: Vue 3 wraps reactive data in ES6 Proxies, so state changes update only the affected DOM nodes.
• Single File Components: Each .vue file keeps template markup, <script setup> logic, and scoped CSS in one place.
• Virtual DOM Updates: Vue batches state changes and patches the real DOM efficiently instead of rebuilding the whole page.

Practical Vue 3 Component Example

In Vue 3, <script setup> exposes top-level imports, variables, and functions directly to the <template> block. Notice how calling increment mutates count.value, and Vue updates the paragraph automatically.

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

const title = ref('Welcome to Vue 3');
const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>Current count: <strong>{{ count }}</strong></p>
    <button @click="increment">Increment Counter</button>
  </div>
</template>

<style scoped>
.card {
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}
button {
  background-color: #42b883;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Common Mistakes

• Forgetting .value in Script: Inside <script setup>, you must read and write count.value. In <template>, Vue unwraps refs automatically, so you write {{ count }}.
• Mutating the DOM Manually: Avoid calling document.querySelector to change text or styles when a reactive ref can drive the template.
• Mixing Vue 2 and Vue 3 Syntax: New projects should use <script setup> rather than legacy new Vue({ el: '#app' }) syntax.

Frequently Asked Questions

Do I need a build step to use Vue 3?

No, you can load Vue from a CDN script tag in a static HTML file. However, Vite gives you .vue Single File Components, fast hot reload, and smaller production bundles.

What is the difference between Options API and Composition API?

The Options API groups code by data, methods, and computed options. The Composition API with <script setup> groups code by feature using imported functions like ref and computed.

Why does Vue 3 use ES6 Proxies for reactivity?

ES6 Proxies detect property additions, deletions, and array index updates natively. This fixes reactivity edge cases that existed in Vue 2's Object.defineProperty approach.