Unit
- Vue.js origin: Evan You released Vue.js in 2014 after working with Angular.js at a technology company. The goal was to extract the most useful parts of Angular, such as declarative rendering and two-way data binding, while removing the complexity and opinionated structure.
- Progressive framework: Vue is designed to be incrementally adoptable. You can use it as a library on an existing page for dynamic widgets or scale it into a full framework with routing and state management for large applications.
- Reactive data model: Vue's reactivity system tracks dependencies automatically. When data changes, the DOM updates efficiently without manual manipulation. This approach reduces boilerplate compared to imperative DOM libraries like jQuery.
- Virtual DOM: Vue uses a virtual DOM to minimize direct DOM operations. Changes are first applied to a lightweight JavaScript representation, then patched to the real DOM in a single batch, improving performance in data-heavy interfaces.
- Component-based architecture: Every Vue application is built from small, reusable components. Each component encapsulates its own template, logic, and styles, promoting separation of concerns and code maintainability.
- Ecosystem maturity: Vue has a rich ecosystem including Vue Router for client-side routing, Pinia or Vuex for state management, and Vite for fast development builds. The official documentation is thorough and beginner-friendly.
- Comparison with other frameworks: Vue is often compared with React and Angular. React is a library focused on the view layer, Angular is a full framework with strong opinions. Vue sits in the middle, offering a complete solution with less ceremony.
- Current version: Vue 3 (released 2020) introduced the Composition API, which provides better logic reuse and TypeScript support. Vue 2 remains in maintenance mode, but all new projects should start with Vue 3.
- Learning path: A typical Vue developer starts with templates and directives, then moves to components, routing, and state management. No prior framework experience is required, but comfort with JavaScript ES6+ helps significantly.
- Template syntax with directives: Vue templates extend HTML with directives like v-if, v-for, v-bind, and v-on. These declarative attributes enable conditional rendering, list iteration, dynamic attribute binding, and event handling directly in the markup, making the logic clear and concise without additional JavaScript code.
- Two-way data binding with v-model: The v-model directive creates a seamless connection between form inputs and component data. It automatically listens to input events and updates the data property, while also reflecting data changes back to the input element. This simplifies form handling and reduces manual event wiring.
- Computed properties and watchers: Computed properties derive values reactively from existing data, caching results for performance. Watchers allow running custom logic when data changes, useful for async operations. Both reduce imperative code and keep component logic clean and maintainable.
Code Example
JavaScript
// Minimal Vue 3 application using createApp
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')This snippet shows the standard entry point for a Vue 3 application. The createApp function takes the root component and mounts it to a DOM element. All child components and plugins are registered on the app instance.
Quick Revision
- Vue.js is a progressive framework started by Evan You in 2014.
- It supports incremental adoption from a library to a full SPA framework.
- Reactivity updates the DOM automatically when data changes.
- Components encapsulate template, logic, and styles for maintainability.
- Vue 3 with Composition API is the current standard for new projects.