Frontend Developer Roadmap (Part 2): Vue.js

สวัสดีครับนักพัฒนาทุกท่าน ยินดีต้อนรับสู่ตอนที่ 2 ของซีรีส์ “Frontend Developer Roadmap”

ในตอนนี้ เราจะมาเจาะลึก Vue.js — หนึ่งในเฟรมเวิร์ก JavaScript ที่ได้รับความนิยมสูงสุดในโลก ด้วยความ เรียบง่าย ยืดหยุ่น และเข้าใจง่าย โดยเฉพาะสำหรับผู้เริ่มต้น

Vue.js ไม่ได้เป็นแค่ทางเลือก แต่เป็น ทางออกที่ทรงพลัง สำหรับทั้งโปรเจกต์เล็กและองค์กรขนาดใหญ่ โดยเฉพาะในจีน ยุโรป และกลุ่มผู้พัฒนาที่ชื่นชอบความชัดเจนและควบคุมได้

บทความนี้ออกแบบมาเพื่อให้คุณ:

• เข้าใจ Vue.js อย่างลึกซึ้ง ไม่ใช่แค่ “ใช้ได้”
• รู้ว่า Vue จัดการ reactivity อย่างไร
• เข้าใจความต่างระหว่าง Options API และ Composition API
• รู้จักเครื่องมือใน Ecosystem ที่จำเป็น
• เตรียมความพร้อมสำหรับการใช้ Vue ร่วมกับ Nuxt.js (ในบทความต่อไป)

---

Vue.js คืออะไร?

Vue.js (อ่านว่า “วิว” /vjuː/) คือ เฟรมเวิร์ก JavaScript สำหรับสร้าง User Interface (UI) ที่ใช้งานง่ายและทรงพลัง

Vue ถูกออกแบบมาให้เป็น “Progressive Framework” ซึ่งเป็นหัวใจสำคัญที่ทำให้มันยืดหยุ่นสูง

🔥 6 เหตุผลที่ทำให้ Vue โดดเด่นและน่าใช้ในปี 2025

---

แนวคิดหลักของ Vue.js

หัวใจของ Vue คือการเปลี่ยนมุมมองการพัฒนาเว็บ จากเดิมที่เราต้อง สั่ง ให้เบราว์เซอร์ทำอะไรทีละขั้นตอน (Imperative) มาเป็นการ บอก ว่าผลลัพธ์สุดท้ายควรมีหน้าตาอย่างไร (Declarative)

แนวคิดนี้ทำให้เราเขียนโค้ดที่เข้าใจง่ายและบำรุงรักษาง่ายขึ้นมาก

1. Declarative Rendering (การแสดงผลเชิงพรรณนา)

แทนที่จะเขียนโค้ดเพื่อเข้าไปจัดการ DOM โดยตรง (เช่น การใช้ document.getElementById) Vue เปิดให้เราใช้ Template Syntax ที่คล้าย HTML เพื่อ “พรรณนา” หรือ “ประกาศ” ว่า UI ควรมีหน้าตาอย่างไรเมื่อข้อมูล (State) เป็นค่านั้นๆ

ดูตัวอย่างโค้ดนี้:

<!-- index.html -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  // app.js
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'สวัสดี Vue!'
      }
    }
  }).mount('#app')
</script>

จากโค้ดด้านบน เราเพียงแค่ ประกาศ (Declare) ว่าต้องการให้ข้อความใน message แสดงผลอยู่ภายในแท็ก < h1> เท่านั้น ส่วนที่เหลือ… Vue จะจัดการเองทั้งหมด เมื่อค่าของ message เปลี่ยนแปลงในอนาคต DOM ก็จะอัปเดตตามโดยอัตโนมัติ ซึ่งเป็นหัวใจของระบบ Reactivity

---

2. Component-Based Architecture (สถาปัตยกรรมเชิงคอมโพเนนต์)

เมื่อแอปพลิเคชันมีขนาดใหญ่ขึ้น การจัดการโค้ด HTML, CSS และ JavaScript ที่กองรวมกันอยู่ในไฟล์ใหญ่ๆ จะกลายเป็นฝันร้ายทันที

Vue แก้ปัญหานี้โดยให้เราแตก UI ทั้งหมดออกเป็นชิ้นส่วนเล็กๆ ที่ทำงานแยกกันและนำกลับมาใช้ซ้ำได้ ที่เรียกว่า Component

ความมหัศจรรย์ของ Vue คือการรวมทุกอย่างที่เกี่ยวกับ Component หนึ่งๆ ไว้ในไฟล์เดียว ที่เรียกว่า Single-File Component (SFC) ซึ่งจะมีนามสกุลเป็น .vue

// src/components/MyButton.vue

<template>
  <button class="btn" :class="`btn-${variant}`" @click="$emit('action')">
    <slot /> <!-- แสดงข้อความหรือไอคอนที่ส่งเข้ามา -->
  </button>
</template>

<script setup>
// Vue 3 Composition API style
defineProps({
  variant: {
    type: String,
    default: 'primary' // 'primary' or 'secondary'
  }
})

defineEmits(['action'])
</script>

<style scoped>
/* สไตล์เหล่านี้จะถูกจำกัดให้ใช้แค่ใน Component นี้เท่านั้น */
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}
.btn:hover {
  transform: scale(1.05);
}
.btn-primary {
  background-color: var(--brand-color);
  color: white;
}
.btn-secondary {
  background-color: var(--card-border-color);
  color: var(--font-color);
}
</style>

---

3. Reactivity System (ระบบปฏิกิริยาตอบสนอง)

นี่คือ “เวทมนตร์” ที่ทำให้ Vue โดดเด่นและใช้งานง่ายอย่างไม่น่าเชื่อ แทนที่เราจะต้องคอยสั่งให้ UI อัปเดตทุกครั้งที่ข้อมูลเปลี่ยน Vue จะทำหน้าที่เป็นเหมือนผู้ช่วยที่คอย “จับตาดู” ข้อมูลของเรา และเมื่อข้อมูลนั้นเปลี่ยนแปลง Vue จะอัปเดตหน้าจอให้โดยอัตโนมัติ

ทำงานอย่างไรเบื้องหลัง?

เบื้องหลังเวทมนตร์นี้คือเทคโนโลยีของ JavaScript ที่เรียกว่า Proxy

ลองดูตัวอย่าง Component Counter ง่ายๆ นี้:

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

// 1. ประกาศ state 'count' ที่เป็น reactive
const count = ref(0)

function increment() {
  // 3. เมื่อเราเปลี่ยนค่า .value, Vue จะรู้ทันที
  count.value++
}
</script>

<template>
  <!-- 2. เมื่อ template อ่านค่า count, Vue จะจดไว้ว่า UI ส่วนนี้ผูกกับ count -->
  <p>Count is: {{ count }}</p>
  <button @click="increment">Click me</button>
</template>

---

Options API vs Composition API

Vue มีรูปแบบการเขียน Component ให้เราเลือกใช้ 2 สไตล์หลัก ซึ่งแต่ละแบบมีจุดเด่นและเหมาะกับสถานการณ์ที่แตกต่างกัน เรามาเริ่มจากสไตล์ดั้งเดิมกันก่อน

1. Options API — คลาสสิก, จัดระเบียบเหมือนชั้นวางหนังสือ

นี่คือสไตล์การเขียนแบบดั้งเดิมของ Vue ที่เป็นที่รู้จักและรักใคร่ของนักพัฒนามานาน เหมาะอย่างยิ่งสำหรับผู้เริ่มต้นและโปรเจกต์ขนาดเล็กถึงกลาง เพราะมีโครงสร้างที่ชัดเจนและบังคับให้เราจัดระเบียบโค้ดเป็นหมวดหมู่

นี่คือตัวอย่าง Component Counter ที่เขียนด้วย Options API:

// src/components/Counter.vue (Options API)

export default {
  // 1. "ข้อมูล" ทั้งหมดของ Component
  data() {
    return {
      count: 0
    }
  },
  // 2. "ฟังก์ชัน" ทั้งหมดที่ใช้ใน Component
  methods: {
    increment() {
      // ใช้ 'this' เพื่อเข้าถึงข้อมูลใน data
      this.count++
    }
  },
  // 3. "ข้อมูลที่ต้องคำนวณ" ค่าจะเปลี่ยนตาม data ที่ผูกไว้
  computed: {
    double() {
      return this.count * 2
    }
  },
  // 4. "Lifecycle Hook" ฟังก์ชันที่จะรันเมื่อถึงช่วงชีวิตที่กำหนด
  mounted() {
    console.log(`The initial count is ${this.count}. Component is ready!`)
  }
}

---

2. Composition API — ยืดหยุ่น, ทรงพลัง, จัดระเบียบตามฟีเจอร์

จำข้อจำกัดของ Options API ที่ว่าเมื่อ Component ใหญ่ขึ้น Logic ที่เกี่ยวข้องกันมักจะกระจัดกระจายไปคนละทิศคนละทางได้ไหมครับ? Composition API ถูกสร้างขึ้นมาเพื่อแก้ปัญหานี้โดยตรงครับ

มันคือสไตล์การเขียนแบบใหม่ที่แนะนำใน Vue 3 ซึ่งเปิดให้เรา จัดกลุ่มโค้ดตามฟังก์ชันการทำงาน (Logical Concern) แทนที่จะจัดกลุ่มตามประเภทของ Option

วิธีการเขียนแบบดั้งเดิม: ใช้ setup()

ในยุคแรกของ Vue 3 เราจะใส่ Logic ทั้งหมดไว้ในฟังก์ชันพิเศษที่ชื่อว่า setup()

// Composition API with setup() function
import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // --- Feature: Counter Logic ---
    const count = ref(0);
    const double = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    // --- End of Feature ---
    
    onMounted(() => {
      console.log('Component is ready!');
    });

    // ต้อง return ทุกอย่างที่ต้องการให้ template ใช้งาน
    return {
      count,
      double,
      increment
    };
  }
}

วิธีที่แนะนำและทันสมัยที่สุด: ใช้ <script setup> เพื่อลดความซ้ำซ้อนและทำให้โค้ดสั้นลงไปอีก Vue ได้แนะนำ Syntax แบบใหม่ที่เรียกว่า <script setup> ซึ่งกลายเป็นมาตรฐานในปัจจุบัน

<!-- MyCounter.vue (Recommended Way) -->
<script setup>
import { ref, computed, onMounted } from 'vue';

// ทุกตัวแปรหรือฟังก์ชันที่ประกาศตรงนี้
// จะสามารถใช้งานใน <template> ได้โดยอัตโนมัติ

const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`);
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment">เพิ่ม</button>
  </div>
</template>

---

Vue Directives: คำสั่งพิเศษใน HTML

Vue มี Directives — คำสั่งที่ขึ้นต้นด้วย v- ที่ช่วยเพิ่มพลังให้ HTML

• v-model ผูกข้อมูลสองทาง (Two-way Binding)
• v-if / v-show แสดง/ซ่อน element
• v-for วนลูปแสดงรายการ
• v-on (@) จับ event เช่น click, input
• v-bind (:) ผูก attribute แบบไดนามิก

<input v-model="search" placeholder="ค้นหา..." />
<ul>
  <li v-for="user in filteredUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>
<button @click="save">บันทึก</button>
<div v-if="loading">กำลังโหลด...</div>

💡 v-if ลบ element ออกจาก DOM, v-show แค่ซ่อนด้วย CSS — เลือกใช้ตามความถี่ของการสลับ

---

Ecosystem ของ Vue: เครื่องมือที่จำเป็น

Vue มีระบบนิเวศที่แข็งแกร่งและเป็นทางการ

🚦 Vue Router

ตัวจัดการเส้นทางอย่างเป็นทางการสำหรับ Vue

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// ใช้ใน Component
router.push('/about');

---

🧠 Pinia — State Management

แทน Vuex รุ่นใหม่ เขียนง่าย ใช้กับ Composition API ได้ดี

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    double: (state) => state.count * 2
  }
});

<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">
    Count: {{ counter.count }}
  </button>
</template>

✅ ไม่ต้องจำ commit, dispatch — ใช้ actions โดยตรง

---

🏗️ Nuxt.js — Meta-Framework สำหรับ Vue

เช่นเดียวกับ Next.js สำหรับ React Nuxt.js คือเฟรมเวิร์กที่สร้างบน Vue เพื่อเพิ่มฟีเจอร์สำคัญ:

• Server-Side Rendering (SSR) → ดีต่อ SEO
• Static Site Generation (SSG)
• File-based Routing
• API Routes
• Auto-imports สำหรับ Components, Composables, Plugins

npx nuxi init my-app

---

🎨 UI Libraries ยอดนิยม

1. Element Plus ดีไซน์เป็นทางการ, ใช้ในองค์กรจีน
2. Quasar Framework สร้างทั้ง Web, Mobile, Electron ในโปรเจกต์เดียว
3. PrimeVue Component ครบครัน, ธีมหลากหลาย
4. Naive UI ทันสมัย, ใช้ TypeScript อย่างเต็มที่

---

แนวทางการเรียนรู้ Vue.js (สำหรับมือใหม่)

หากคุณเพิ่งเริ่มต้น นี่คือลำดับที่แนะนำ พร้อมลิงก์ไปยังแหล่งเรียนรู้:

1. ฝึก JavaScript พื้นฐาน
   🔗 MDN Web Docs: JavaScript
   🎥 ช่อง YouTube: The Net Ninja - Modern JavaScript

---

2. เรียนรู้ Vue พื้นฐาน (Options API)
   🔗 Vue.js Official Guide

---

3. ย้ายมาใช้ Composition API และ <script setup>
   🔗 Vue Mastery: Composition API
   💻 GitHub: vuejs/docs - Examples

---

4. สร้างโปรเจกต์เล็กๆ เช่น To-Do List, Blog
   🔗 Frontend Mentor: Vue Challenges

---

5. เพิ่ม Vue Router และ Pinia
   🔗 Vue Router Guide
   🔗 Pinia Docs

---

6. ย้ายไป Nuxt.js เพื่อสร้างแอปสมบูรณ์
   🔗 Nuxt.js Documentation

💡 เคล็ดลับ: เริ่มจาก Options API เพื่อเข้าใจพื้นฐาน แล้วค่อยย้ายไป Composition API เมื่อโปรเจกต์ซับซ้อนขึ้น

---

สรุป

Vue.js ไม่ใช่แค่ “ทางเลือก” แต่เป็น เฟรมเวิร์กที่ออกแบบมาเพื่อประสิทธิภาพและความชัดเจน

ด้วยคุณสมบัติเด่น:

• เอกสารดีที่สุดในวงการ
• เรียนรู้ง่าย แต่ทรงพลังพอสำหรับโปรเจกต์ใหญ่
• Reactivity System ที่ชาญฉลาด
• Composition API ที่ยืดหยุ่นสูง
• Ecosystem ที่ครบครัน

Vue จึงยังคงเป็นหนึ่งในตัวเลือกที่ดีที่สุดสำหรับนักพัฒนาทั้งมือใหม่และมืออาชีพในปี 2025

---

🚀 คำแนะนำสุดท้าย: ฝึกด้วยโปรเจกต์จริง ไม่ว่าจะเป็น To-Do App หรือ Admin Dashboard การลงมือทำคือกุญแจสู่ความเข้าใจลึก

ติดตามตอนต่อไป: Nuxt.js — เฟรมเวิร์กที่ทำให้ Vue สมบูรณ์แบบ

---