Series · 12 parts

Vue.js 3 — từ Zero đến Production

Series tiếng Việt đưa bạn từ "Vue là gì" đến làm chủ Vue 3 hiện đại theo phong cách production: Composition API, TypeScript và Vite. Bắt đầu với mental model — reactivity là gì, Single-File Component, và vì sao Vue khác React — rồi cú pháp template và directive (v-bind, v-if, v-for, v-on, v-model), đào sâu hệ reactivity (ref, reactive, computed, watch/watchEffect và các bẫy thường gặp). Tiếp đó là component thực thụ (props, emits, slots, provide/inject), Composition API và composable để tái dùng logic, form và v-model tùy biến, định tuyến với Vue Router, quản lý state với Pinia, xử lý bất đồng bộ/Suspense/data fetching, dùng TypeScript đúng cách với Vue, tối ưu hiệu năng, và kết bằng phần testing (Vitest + Vue Test Utils) cùng một capstone. Mỗi phần có code chạy được và bài tập thực hành.

01 Vue.js 3 · Phần 1 — Mental Model & App đầu tiên

Bắt đầu Vue 3 đúng cách: reactivity là gì và vì sao nó là trái tim của Vue, Single-File Component, dựng project với Vite, và viết app đầu tiên với <script setup> + Composition API.
02 Vue.js 3 · Phần 2 — Cú pháp Template & Directive

Bộ công cụ khai báo UI của Vue: interpolation, v-bind cho attribute, v-if vs v-show, v-for và vì sao cần key, v-on với event modifier, class/style binding động, và v-model ràng buộc hai chiều.
03 Vue.js 3 · Phần 3 — Reactivity Deep Dive

Mở nắp capo reactivity của Vue 3: ref vs reactive, track/trigger qua Proxy, computed được cache thế nào, watch vs watchEffect, các bẫy mất reactivity (destructure, toRefs), và shallowRef/readonly.
04 Vue.js 3 · Phần 4 — Component: Props, Emits, Slots & Provide/Inject

Giao tiếp giữa component trong Vue 3: truyền dữ liệu xuống bằng defineProps (typed), bắn sự kiện lên bằng defineEmits, tùy biến nội dung qua slot (named & scoped), và chia sẻ xuyên tầng với provide/inject.
05 Vue.js 3 · Phần 5 — Composition API & Composable

Trích logic có trạng thái thành hàm useXxx() tái dùng được: anatomy của một composable, quy ước đặt tên/trả về, dọn dẹp với lifecycle, nhận tham số reactive, và vì sao composable thắng mixin.
06 Vue.js 3 · Phần 6 — Form & v-model (kể cả component tùy biến)

Làm chủ form trong Vue 3: v-model trên mọi loại input và modifier, defineModel để dựng v-model cho component của bạn, nhiều v-model trên một component, và validate form với zod sạch sẽ.
07 Vue.js 3 · Phần 7 — Vue Router

Định tuyến client-side với Vue Router 4: cấu hình route, route động và param, RouterLink/RouterView, điều hướng programmatic, nested route & layout, lazy-load để chia bundle, và navigation guard bảo vệ trang.
08 Vue.js 3 · Phần 8 — Pinia: Quản lý State

State dùng chung toàn app với Pinia: setup store theo Composition API, state/getters/actions, dùng store trong component và router, giữ reactivity khi destructure với storeToRefs, và vì sao Pinia thay thế Vuex.
09 Vue.js 3 · Phần 9 — Async, Suspense & Data Fetching

Xử lý bất đồng bộ trong Vue 3: pattern fetch có loading/error/empty, async component với <Suspense> và async setup, error boundary qua onErrorCaptured, race condition, và khi nào nên dùng TanStack Query để cache server state.
10 Vue.js 3 · Phần 10 — TypeScript với Vue

Dùng TypeScript đúng cách với Vue 3: type props/emits/slots, generic component, template ref đã ép kiểu, type cho composable và Pinia store, ép kiểu provide/inject, và những bẫy type thường gặp.
11 Vue.js 3 · Phần 11 — Tối ưu Hiệu năng

Làm Vue 3 nhanh: hiểu khi nào component re-render, v-once và v-memo, shallowRef cho dữ liệu lớn, lazy-load component và route, ảo hóa danh sách dài, KeepAlive, và đọc bundle để cắt code thừa.
12 Vue.js 3 · Phần 12 — Testing & Capstone

Khép lại series: test component với Vitest + Vue Test Utils (mount, kích sự kiện, mock store/router), test composable, vài lưu ý e2e với Playwright, rồi capstone gộp router + Pinia + form validate + data fetching.