Vue Introduction and Core Concepts

What is Vue.js?

Vue.js (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed to be incrementally adoptable from the ground up. Vue's core library focuses on the view layer only and is not only easy to pick up but also integrates well with other libraries or existing projects.

Why Choose Vue?

Imagine you're building a house:

• React is like giving you a set of blocks and a manual—you need to design and build yourself
• Angular is like giving you a complete construction team and strict building specifications—everything follows protocol
• Vue is like giving you smart building blocks that are both simple to use and powerfully extensible

Vue's design philosophy allows developers to:

<!-- Simplest Vue application -->
<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello, Vue!",
      };
    },
  }).mount("#app");
</script>

With just a few lines of code, we've created a reactive data-binding interface!

Vue's Core Features

1. Reactive Data Binding

Reactivity is one of Vue's most charming features. When you change data, the interface automatically updates. It's like having a smart assistant who immediately tells everyone whenever you give them new information.

const app = createApp({
  data() {
    return {
      count: 0,
      name: "John Smith",
      items: ["Apple", "Banana", "Orange"],
    };
  },
  methods: {
    increment() {
      this.count++; // Interface automatically updates to show new number
    },
    addItem(item) {
      this.items.push(item); // List automatically displays new item
    },
  },
});

How Reactivity Works:

Vue uses JavaScript's reactivity system to track dependencies. When a component renders, Vue records which data the component uses. When that data changes, Vue notifies all components using that data to re-render.

// Vue 3's reactivity implementation (simplified)
const data = { count: 0 };

// Create reactive object
const reactiveData = new Proxy(data, {
  get(target, key) {
    // Collect dependencies: record who's accessing this property
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    // Trigger update: notify all dependents to re-render
    trigger(target, key);
    target[key] = value;
    return true;
  },
});

2. Component-based Development

Vue advocates breaking interfaces into independent, reusable components. Each component encapsulates its own HTML, CSS, and JavaScript—as simple as building with blocks.

<!-- Parent component -->
<template>
  <div class="app">
    <h1>My Todo List</h1>
    <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @toggle="toggleTodo"
    />
  </div>
</template>

<script>
  import TodoItem from "./TodoItem.vue";

  export default {
    components: {
      TodoItem,
    },
    data() {
      return {
        todos: [
          { id: 1, text: "Learn Vue", completed: false },
          { id: 2, text: "Build App", completed: true },
        ],
      };
    },
    methods: {
      toggleTodo(todo) {
        todo.completed = !todo.completed;
      },
    },
  };
</script>

3. Template Syntax

Vue provides concise yet powerful template syntax that lets you declaratively describe DOM structure.

<template>
  <div>
    <!-- Text interpolation -->
    <h1>{{ title }}</h1>

    <!-- Attribute binding -->
    <img :src="imageUrl" :alt="imageAlt" />

    <!-- Conditional rendering -->
    <p v-if="showMessage">Only shows when showMessage is true</p>
    <p v-else>Otherwise shows this</p>

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

    <!-- Event handling -->
    <button @click="handleClick">Click me</button>

    <!-- Two-way data binding -->
    <input v-model="searchText" placeholder="Search..." />
  </div>
</template>

Vue's Design Philosophy

1. Progressive Framework

Vue's "progressive" nature means you can gradually adopt Vue features based on project needs:

• Phase 1: Use only Vue's core features for data binding
• Phase 2: Add component system to build complex interfaces
• Phase 3: Integrate routing management to build single-page applications
• Phase 4: Add state management for handling large applications
• Phase 5: Use Vue CLI and build tools for engineering development

// Example of progressive usage
// Step 1: Simple data binding
const app = createApp({
  data() {
    return { message: "Hello Vue" };
  },
});

// Step 2: Add routing
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});
app.use(router);

// Step 3: Add state management
import { createStore } from "vuex";
const store = createStore({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});
app.use(store);

// Step 4: Mount application
app.mount("#app");

2. Convention over Configuration

Vue follows the "convention over configuration" principle, providing sensible defaults to let you start developing quickly while remaining customizable when needed.

// Vue's smart default configuration
export default {
  // Component name automatically inferred from filename
  // Template automatically compiled
  // Styles automatically scoped
  // Props automatically validated

  props: {
    title: String, // Simple type checking
    count: {
      type: Number,
      default: 0, // Default value
      required: true, // Required validation
    },
  },
};

3. Separation of Concerns

Vue advocates separating templates, logic, and styles into different blocks for cleaner, more maintainable code.

<template>
  <!-- Template area: Focus on UI structure and display logic -->
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    <button @click="handleClick">Action</button>
  </div>
</template>

<script>
  // Script area: Focus on business logic and data management
  export default {
    name: "MyComponent",
    props: {
      title: String,
      description: String,
    },
    emits: ["click"],
    methods: {
      handleClick() {
        this.$emit("click");
      },
    },
  };
</script>

<style scoped>
  /* Style area: Focus on visual presentation */
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .card h2 {
    margin: 0 0 8px 0;
    color: #333;
  }
</style>

Vue vs Other Frameworks

Vue vs React

Feature	Vue	React
Template Syntax	HTML template syntax, more intuitive	JSX, JavaScript syntax extension
State Management	Reactive system, auto-updates	Needs manual update triggering
Learning Curve	Relatively gentle, closer to traditional HTML	Steeper, needs understanding JSX and functional programming
Flexibility	Provides more conventions and best practices	More flexible, requires more choices
Performance	Template compilation optimization, excellent	Virtual DOM optimization, excellent

<!-- Vue template -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p v-if="showContent">{{ content }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

// React JSX
function MyComponent({ title, showContent, content, items }) {
  return (
    <div>
      <h1>{title}</h1>
      {showContent && <p>{content}</p>}
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Vue vs Angular

Feature	Vue	Angular
Complexity	Relatively simple, low learning cost	Complex, steep learning curve
Framework Size	Lightweight, ~34KB	Heavy, includes complete ecosystem
TypeScript	Optional support	Native support, mandatory use
Dependency Injection	Simple provide/inject	Complete DI system
Two-way Binding	v-model directive	[(ngModel)] syntax

Vue's Advantages and Use Cases

Vue's Advantages

1. Easy to Learn and Use

   • Progressive learning path
   • Excellent official documentation and community support
   • Comprehensive documentation available

2. High Performance

   • Elegant reactivity system
   • Template compilation optimization
   • Virtual DOM technology

3. Flexible Integration

   • Can be gradually integrated into existing projects as a library
   • Supports multiple build tools and development patterns

4. Complete Ecosystem

   • Vue Router (routing management)
   • Vuex/Pinia (state management)
   • Vue CLI (scaffolding tool)
   • Vue DevTools (development tools)

Use Cases

Vue is particularly suited for:

1. Small to medium single-page applications: Fast development, easy maintenance
2. Enterprise backend management systems: Component-based development improves efficiency
3. Mobile H5 applications: Excellent performance, small size
4. Progressive project transformation: Can gradually replace existing pages

Summary

As a progressive JavaScript framework, Vue.js occupies an important position in modern frontend development with its concise syntax, powerful reactivity system, and excellent development experience. It can both satisfy rapid development needs for small projects and support development and maintenance of large complex applications.

Vue's Core Value:

• Simple but not simplistic: Concise API design, powerful and complete functionality
• Progressive adoption: Can be gradually introduced, lowering learning costs
• Excellent performance: Reactivity system and virtual DOM ensure runtime efficiency
• Complete ecosystem: Official and community provide rich tools and libraries

Mastering Vue.js not only improves your frontend development efficiency but also helps you understand modern frontend framework design philosophy, laying a solid foundation for becoming an excellent frontend engineer.