footer:
false

Giới Thiệu {#introduction}

:::info 🚀 Bạn đang đọc tài liệu Vue 3!

• Vue 2 đã kết thúc hỗ trợ vào 31/12/2023.
  Tìm hiểu thêm về Vue 2 EOL.
• Đang nâng cấp từ Vue 2?
  Xem Hướng dẫn Migration.
  :::

Học Vue với video hướng dẫn trên VueMastery.com

🎯 Vue 3
– Framework Hiện Đại Cho Web

Chào mừng bạn đến với tài liệu chính thức của Vue 3
– framework JavaScript tiên tiến giúp xây dựng giao diện người dùng một cách dễ dàng và hiệu quả!

💡 Tại Sao Chọn Vue 3?

Vue 3 mang đến những cải tiến vượt bậc:

• ⚡ Hiệu năng tốt hơn
  – Tốc độ render nhanh hơn, bundle size nhỏ hơn
• 🔧 Composition API
  – Cách tiếp cận linh hoạt để tổ chức code
• 🎯 TypeScript hỗ trợ tốt hơn
  – Phát triển ứng dụng ổn định và dễ bảo trì
• 📦 Kích thước nhẹ hơn
  – Tree-shaking tốt hơn, ứng dụng tải nhanh hơn

⚠️ Chú ý Quan Trọng:

• Vue 2 đã chính thức kết thúc hỗ trợ từ 31/12/2023
• Nếu bạn đang sử dụng Vue 2, hãy lên kế hoạch nâng cấp sớm
• Vue 3 tương thích ngược với hầu hết các tính năng của Vue 2

🚀 Bắt Đầu Hành Trình Vue 3

Dù bạn là:

– Người mới bắt đầu học lập trình frontend
– Developer chuyển từ framework khác sang Vue
– Lập trình viên Vue 2 muốn nâng cấp lên Vue 3

Tài liệu này sẽ hướng dẫn bạn từ cơ bản đến nâng cao, với:

– 📝 Ví dụ thực tế dễ hiểu
– 💻 Code samples trực quan
– 🔧 Best practices từ cộng đồng
– 🎯 Tips và tricks hữu ích

Hãy sẵn sàng khám phá thế giới Vue 3
– nơi việc xây dựng ứng dụng web trở nên thú vị và hiệu quả hơn bao giờ hết! 🌟

Vue là gì?
{#what-is-vue}

Vue (phát âm là /vjuː/, giống như view) là một framework JavaScript dùng để xây dựng giao diện người dùng.
🚀 Nó được xây dựng dựa trên HTML, CSS và JavaScript tiêu chuẩn, cung cấp mô hình lập trình khai báo và dựa trên component giúp bạn phát triển hiệu quả các giao diện người dùng với bất kỳ độ phức tạp nào.

💻 Ví dụ đơn giản đầu tiên

Dưới đây là một ví dụ nhỏ để bạn hình dung Vue hoạt động như thế nào:

import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') 

import { createApp, ref } from 'vue' createApp({ setup() { return { count: ref(0) } } }).mount('#app') 

<div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div> 

Kết quả thực tế:

🎯 Hai tính năng cốt lõi của Vue

Ví dụ trên minh họa hai tính năng quan trọng nhất của Vue:

1. Render Khai Báo (Declarative Rendering) ⚡

• Vue mở rộng HTML tiêu chuẩn với cú pháp template
• Cho phép bạn mô tả đầu ra HTML dựa trên trạng thái JavaScript
• Thay vì “làm thế nào” (imperative), bạn chỉ cần nói “cái gì” (declarative)

2. Tính Reactivity (Phản ứng) 💡

• Vue tự động theo dõi thay đổi trạng thái JavaScript
• Cập nhật DOM một cách hiệu quả khi có thay đổi
• Không cần bạn phải tự thao tác DOM thủ công

📝 Giải thích thêm cho người mới

💡 Lưu ý: Nếu bạn thấy có nhiều điều chưa hiểu
– đừng lo lắng!
Đây chỉ là phần giới thiệu tổng quan.
Chúng ta sẽ đi vào chi tiết từng phần trong các chương tiếp theo.

⚠️ Chú ý quan trọng: Tài liệu này giả định bạn đã có kiến thức cơ bản về:

– HTML (cấu trúc trang web)
– CSS (trang trí giao diện)
– JavaScript (lập trình tương tác)

🎯 Điểm mấu chốt: Nếu bạn hoàn toàn mới với lập trình frontend, có lẽ không nên bắt đầu ngay với framework.
Hãy nắm vững kiến thức nền tảng trước, sau đó quay lại!

🔧 Tài nguyên học tập bổ sung

Để kiểm tra và củng cố kiến thức nền tảng, bạn có thể tham khảo:

– JavaScript Overview
– HTML Introduction
– CSS First Steps

✅ Tin vui: Kinh nghiệm với các framework khác sẽ hữu ích, nhưng không bắt buộc.
Vue được thiết kế để dễ học ngay cả với người mới!

Tóm tắt: Vue giúp bạn xây dựng giao diện web hiện đại với cách tiếp cận đơn giản, mạnh mẽ và dễ học.
Hãy cùng khám phá!
🚀

Vue
– Framework Tiến Hóa Linh Hoạt 🚀

Vue không chỉ là một framework đơn thuần, mà là một hệ sinh thái toàn diện bao trùm hầu hết các tính năng phổ biến nhất trong phát triển frontend.
Nhưng web là một thế giới vô cùng đa dạng
– những gì chúng ta xây dựng có thể khác biệt hoàn toàn về quy mô và hình thức.

🎯 Điểm mấu chốt: Vue được thiết kế để LINH HOẠT và có thể ÁP DỤNG TỪNG PHẦN theo nhu cầu của bạn!

💻 Các Cách Sử Dụng Vue Trong Thực Tế

Tùy theo dự án cụ thể, bạn có thể sử dụng Vue theo nhiều cách khác nhau:

• ⚡ Tăng cường HTML tĩnh
  – Không cần build step, nhúng trực tiếp vào trang web có sẵn
• 🔧 Nhúng dưới dạng Web Components
  – Có thể sử dụng trên bất kỳ trang nào
• 🚀 Single-Page Application (SPA)
  – Ứng dụng một trang, trải nghiệm mượt mà
• 🌐 Fullstack / Server-Side Rendering (SSR)
  – Render từ server, tốt cho SEO
• 📱 Jamstack / Static Site Generation (SSG)
  – Tạo site tĩnh, hiệu suất cao
• 🎯 Đa nền tảng
  – Desktop, mobile, WebGL, và cả terminal!

💡 Lưu ý: Nếu những khái niệm này làm bạn cảm thấy choáng ngợp, đừng lo lắng!
Hướng dẫn và tutorial chỉ yêu cầu kiến thức cơ bản về HTML và JavaScript.
Bạn hoàn toàn có thể theo dõi mà không cần phải là chuyên gia.

🎓 Kiến Thức Nền Tảng
– Một Lần Học, Dùng Mãi Mãi

Điều tuyệt vời nhất của Vue là:
kiến thức cốt lõi về cách Vue hoạt động được chia sẻ xuyên suốt tất cả các cách sử dụng trên!

Điều này có nghĩa là:

– Nếu bạn là người mới bắt đầu, kiến thức học được hôm nay vẫn sẽ hữu ích khi bạn phát triển và giải quyết những mục tiêu lớn hơn trong tương lai
– Nếu bạn là developer giàu kinh nghiệm, bạn có thể chọn cách tối ưu nhất để tận dụng Vue dựa trên vấn đề cụ thể, trong khi vẫn duy trì hiệu suất làm việc

🌟 Tại Sao Lại Gọi Là “Framework Tiến Hóa”?

Chúng tôi gọi Vue là “The Progressive Framework” bởi vì:

Đây là một framework có thể PHÁT TRIỂN CÙNG BẠN và THÍCH ỨNG với nhu cầu của bạn

Ví dụ thực tế tại Việt Nam:

– Startup nhỏ:
Bắt đầu với Vue nhúng vào HTML có sẵn, không cần setup phức tạp
– Công ty vừa:
Nâng cấp lên SPA khi sản phẩm phát triển
– Enterprise lớn:
Sử dụng SSR/SSG cho các dự án yêu cầu cao về SEO và performance

⚠️ Chú ý: Nếu bạn là developer có kinh nghiệm muốn tìm hiểu cách tích hợp Vue tốt nhất vào stack hiện tại, hoặc tò mò về ý nghĩa của các thuật ngữ trên, hãy xem chi tiết trong Các Cách Sử Dụng Vue.

📝 Tóm tắt: Vue giống như một người bạn đồng hành
– bắt đầu đơn giản khi bạn mới học, và phát triển cùng bạn khi bạn trở thành chuyên gia.
Bạn không cần phải học lại từ đầu khi chuyển từ dự án nhỏ sang hệ thống lớn!

Single-File Components (SFC)
– Component Đơn Tập Tin {#single-file-components}

🚀 Khám phá sức mạnh của Vue SFC
– cách tổ chức component thông minh và hiệu quả!

Trong hầu hết các dự án Vue sử dụng build tools, chúng ta thường viết component bằng định dạng file giống HTML gọi là Single-File Component (Component Đơn Tập Tin, còn được biết đến với tên *.vue files, viết tắt là SFC).

🔍 SFC là gì?

Một Vue SFC, như tên gọi đã nói lên tất cả, đóng gói logic (JavaScript), template (HTML) và styles (CSS) của component trong MỘT file duy nhất.

💡 Lưu ý: Điều này giống như việc bạn có một “căn phòng” chứa đầy đủ mọi thứ cần thiết thay vì phải chạy qua nhiều phòng khác nhau!

📝 Ví Dụ Thực Tế

Dưới đây là ví dụ về counter component được viết bằng định dạng SFC:

🎯 Phiên bản Options API (Truyền thống)

<script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style> 

⚡ Phiên bản Composition API (Hiện đại)

<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style> 

🎯 Điểm mỗi:
Tại sao SFC lại quan trọng?

SFC là đặc trưng định nghĩa của Vue và là cách được khuyến nghị để viết Vue components khi use case của bạn cần thiết lập build setup.

💡 Ưu điểm nổi bật:

• Tổ chức code gọn gàng:
  Mọi thứ liên quan đến component đều trong một file
• Phát triển nhanh chóng:
  Dễ dàng tìm và sửa code
• Scoped styles:
  CSS chỉ ảnh hưởng đến component hiện tại
• Tooling mạnh mẽ:
  Hỗ trợ TypeScript, SCSS, hot-reload

⚠️ Chú ý: SFC cần được biên dịch (compile) trước khi chạy trong browser.
Đừng lo
– Vue CLI, Vite và các build tools sẽ xử lý việc này cho bạn!

🚀 Áp dụng vào dự án thực tế

Trong các dự án Vue tại Việt Nam, SFC được sử dụng rộng rãi vì:

– Dễ bảo trì và mở rộng
– Teamwork hiệu quả
– mỗi developer tập trung vào component của mình
– Tích hợp dễ dàng với Vite, Webpack
– các công cụ build phổ biến

Bạn có thể tìm hiểu sâu hơn về cách thức và lý do sử dụng SFC trong phần chuyên sâu
– nhưng hiện tại, chỉ cần biết rằng Vue sẽ xử lý tất cả thiết lập build tools cho bạn!

💻 Bắt đầu ngay: Hãy thử tạo component đầu tiên của bạn với SFC và trải nghiệm sự khác biệt!

Phong Cách API trong Vue {#api-styles}

🚀 Các component Vue có thể được viết theo hai phong cách API khác nhau: Options API và Composition API.

Hãy cùng khám phá sự khác biệt và cách lựa chọn phong cách phù hợp cho dự án của bạn!

Options API {#options-api}

🎯 Options API là cách tiếp cận “truyền thống”
– bạn định nghĩa logic của component bằng một object với các options như data, methods, và mounted.

Cách hoạt động:

• Các thuộc tính được định nghĩa trong options sẽ được truy cập qua this
  – trỏ đến instance của component
• Code được tổ chức theo nhóm chức năng rõ ràng

<script> export default { // data() trả về reactive state // và được expose trên `this` data() { return { count: 0 } }, // Methods là các hàm thay đổi state và kích hoạt updates // Có thể bind làm event handlers trong template methods: { increment() { this.count++ } }, // Lifecycle hooks được gọi ở các giai đoạn khác nhau // của vòng đời component // Hàm này được gọi khi component được mounted mounted() { console.log(`Giá trị ban đầu là ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template> 

Thử trên Playground

Composition API {#composition-api}

⚡ Composition API là cách tiếp cận “hiện đại”
– bạn định nghĩa logic component bằng cách sử dụng các hàm API được import.

Điểm đặc biệt:

• Thường được dùng với <script setup> trong SFCs
• setup attribute giúp Vue thực hiện compile-time transforms, giảm boilerplate code
• Imports và các biến/hàm được khai báo trong <script setup> có thể dùng trực tiếp trong template

💡 Lưu ý: Composition API không thay thế Options API mà là một cách tiếp cận khác, linh hoạt hơn!

Dưới đây là cùng một component, với template giống hệt, nhưng sử dụng Composition API:

<script setup> import { ref, onMounted } from 'vue' // reactive state const count = ref(0) // functions that mutate state and trigger updates function increment() { count.value++ } // lifecycle hooks onMounted(() => { console.log(`Giá trị ban đầu là ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template> 

Thử trên Playground

Nên chọn cái nào?
{#which-to-choose}

🤔 Câu hỏi triệu đô: Options API hay Composition API?

Cả hai đều mạnh mẽ!

✅ Điểm chung:
– Cả hai đều có khả năng xử lý hầu hết các use case thông thường
– Chúng là các interfaces khác nhau nhưng chạy trên cùng một hệ thống cốt lõi
– Thực tế:
Options API được implement trên nền Composition API!

– Các khái niệm cơ bản về Vue được chia sẻ giữa hai phong cách

So sánh chi tiết:

🎯 Options API
– “Truyền thống & Dễ tiếp cận”

Ưu điểm:
– Tập trung vào khái niệm “component instance” (this)
– Phù hợp với mental model hướng đối tượng (OOP)
– Thân thiện với người mới bắt đầu
– Che giấu các chi tiết reactivity phức tạp
– Tổ chức code rõ ràng theo nhóm chức năng

Phù hợp khi:
– Bạn mới học Vue
– Đến từ background OOP (Java, C#, PHP…)
– Làm dự án nhỏ, ít complexity

⚡ Composition API
– “Hiện đại & Linh hoạt”

Ưu điểm:
– Khai báo reactive state trực tiếp trong function scope
– Kết hợp state từ nhiều functions để xử lý complexity
– Linh hoạt và mạnh mẽ trong việc tổ chức và tái sử dụng logic
– TypeScript support tốt hơn

Yêu cầu:
– Hiểu rõ về reactivity trong Vue
– Cần tư duy tổ chức code tốt hơn

Phù hợp khi:
– Xây dựng ứng dụng full-scale với độ phức tạp cao
– Cần tái sử dụng logic across nhiều components
– Sử dụng TypeScript

💡 Khuyến nghị thực tế cho developer Việt Nam

Nếu bạn MỚI học Vue:

• Chọn phong cách nào trông dễ hiểu hơn với bạn!
• Đừng lo lắng
  – các concept cốt lõi giống nhau cả
• Bạn luôn có thể học phong cách kia sau này

Cho sử dụng THỰC TẾ:

🎯 Chọn Options API nếu:

• Không dùng build tools
• Làm dự án độ phức tạp thấp
• Progressive enhancement
• Team có nhiều junior developers

⚡ Chọn Composition API + SFC nếu:

• Xây dựng full applications với Vue
• Dự án complexity cao
• Cần tái sử dụng logic nhiều
• Team có experience với reactivity concepts

📝 Kinh nghiệm thực tế từ chuyên gia

💡 Tip quan trọng: Bạn không cần cam kết chỉ dùng một style!

• Trong giai đoạn học, hãy thử cả hai
• Tài liệu Vue cung cấp code samples cho cả hai styles
• Bạn có thể toggle giữa chúng bằng API Preference switches trên sidebar trái

⚠️ Chú ý: Composition API không “tốt hơn”
– nó chỉ “phù hợp hơn” cho một số trường hợp cụ thể.
Đừng chạy theo trend mà hãy chọn cái phù hợp với dự án và team của bạn!

🎯 Tóm tắt cuối cùng:
– Options API:
Dễ học, tổ chức rõ ràng, phù hợp beginner & dự án nhỏ
– Composition API:
Linh hoạt, mạnh mẽ, phù hợp complex apps & logic reuse
– Quyết định:
Dựa trên nhu cầu dự án, kinh nghiệm team và personal preference

Hãy bắt đầu với style bạn cảm thấy thoải mái nhất, và đừng ngại khám phá style còn lại khi đã sẵn sàng!
🚀

Vẫn Còn Thắc Mắc?
{#still-got-questions}

Nếu bạn vẫn còn điều gì chưa rõ, đừng ngần ngại!
Hãy ghé qua mục Câu Hỏi Thường Gặp (FAQ) của chúng tôi.

💡 Lưu ý: Đây là nơi tổng hợp những thắc mắc phổ biến nhất từ cộng đồng developer Việt Nam, có thể giải đáp ngay lập tức cho bạn!

Chọn Lộ Trình Học Tập Phù Hợp {#pick-your-learning-path}

Mỗi developer đều có cách học riêng biệt!
🎯 Dưới đây là các lựa chọn được thiết kế để phù hợp với phong cách của bạn:

⚡ Khuyến nghị: Nếu có thời gian, bạn nên trải nghiệm tất cả các hình thức học để có cái nhìn toàn diện nhất!

💡 Gợi Ý cho Developer Việt Nam:

• Mới bắt đầu? → Bắt đầu với Tutorial để có trải nghiệm thực tế
• Đã có kinh nghiệm? → Đọc Guide để hiểu sâu bản chất
• Cần giải quyết vấn đề cụ thể? → Tìm trong Examples để có code mẫu ngay

🚀 Quan trọng: Không có cách học nào là “tốt nhất”
– hãy chọn cách phù hợp nhất với bạn và bắt đầu ngay hôm nay!