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.
Filter/Tag
#vue
12 entries
-
-
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.
-
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.
-
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.
-
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.
-
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ẽ.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.