🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

---
footer: false
---

# Giới Thiệu Vue 3 {#introduction}

🚀 **Chào mừng bạn đến với tài liệu chính thức của Vue 3!**

:::info 💡 **Thông tin quan trọng:**
- Vue 2 đã chính thức kết thúc hỗ trợ vào **31/12/2023**. Xem chi tiết tại [Vue 2 EOL](https://v2.vuejs.org/eol/).
- Bạn đang nâng cấp từ Vue 2? Tham khảo ngay [Hướng dẫn Migration](https://v3-migration.vuejs.org/) để chuyển đổi dễ dàng.
:::

<style src="@theme/styles/vue-mastery.css"></style>
<div class="vue-mastery-link">
  <a href="https://www.vuemastery.com/courses/" target="_blank">
    <div class="banner-wrapper">
      <img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
    </div>
    <p class="description">Học Vue qua video hướng dẫn tại <span>VueMastery.com</span></p>
    <div class="logo-wrapper">
        <img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
    </div>
  </a>
</div>

🎯 **Tại sao bạn nên chọn Vue 3?**
- Hiệu năng vượt trội ⚡
- Composition API linh hoạt 💡
- Dễ dàng bảo trì và mở rộng 🔧
- Cộng đồng hỗ trợ mạnh mẽ tại Việt Nam 🇻🇳

💡 **Lưu ý cho người mới bắt đầu:**
- Vue 3 hoàn toàn tương thích ngược với hầu hết các tính năng Vue 2
- Bạn có thể sử dụng song song Options API và Composition API
- Các thư viện phổ biến như Vuex, Router đã có phiên bản cho Vue 3

📝 **Gợi ý học tập:**
1. Bắt đầu với các khái niệm cơ bản
2. Thực hành qua project nhỏ (ví dụ: Todo App)
3. Tham gia nhóm Vue Việt Nam trên Facebook để trao đổi
4. Theo dõi các buổi workshop Vue.js tại Việt Nam

⚠️ **Chú ý quan trọng:**
Nếu bạn đang làm dự án mới, hãy sử dụng Vue 3 ngay từ đầu để tận dụng tất cả tính năng mới nhất và tránh phải nâng cấp sau này!

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

🚀 Vue.js (phát âm là /vjuː/, giống từ “view”) là một framework JavaScript giúp bạn xây dựng giao diện người dùng (UI) một cách dễ dàng và hiệu quả.

💡 Hiểu đơn giản về Vue

Vue hoạt động trên nền tảng HTML, CSS và JavaScript tiêu chuẩn, cung cấp:

– Mô hình lập trình component-based (theo component)
– Cú pháp khai báo (declarative) giúp code dễ đọc và bảo trì
– Hệ thống reactivity tự động cập nhật UI khi dữ liệu thay đổi

🔎 Ví dụ minh họa cực ngắn

Dưới đây là ví dụ đếm số cực kỳ đơn giản:

Option API (phiên bản truyền thống)

import { createApp } from 'vue'

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

Composition API (phiên bản mới)

import { createApp, ref } from 'vue'

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

Phần HTML

<div id="app">
  <button @click="count++">
    Bấm đếm: {{ count }}
  </button>
</div>

Kết quả thực tế:

⚡ Hai tính năng CỐT LÕI của Vue

🎯 1. Declarative Rendering (Khai báo template)
– Vue mở rộng HTML thông thường bằng cú pháp template
– Cho phép mô tả UI dựa trên trạng thái JavaScript một cách tự nhiên

🎯 2. Reactivity (Tự động cập nhật)
– Vue tự động theo dõi thay đổi dữ liệu
– Cập nhật DOM một cách thông minh và hiệu quả

💡 Lưu ý: Nếu bạn thắc mắc “làm sao Vue làm được điều này?”, đừng lo!
Chúng tôi sẽ giải thích chi tiết từng phần trong tài liệu này.

📝 Kiến thức nền tảng cần có

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

– HTML
– CSS
– JavaScript

Nếu bạn hoàn toàn mới với lập trình frontend:
1.
Hãy học những kiến thức cơ bản trước 2.
Quay lại với Vue sau khi đã nắm vững nền tảng

🔗 Tài nguyên kiểm tra kiến thức:
– JavaScript cơ bản
– Nhập môn HTML
– CSS đầu tiên

💻 Kinh nghiệm với framework khác? Có thì tốt, nhưng không bắt buộc!
Vue rất dễ tiếp cận ngay cả với người mới.

🌟 Tại sao nên chọn Vue?

Vue được ưa chuộng tại Việt Nam nhờ:

– Học dễ, làm nhanh
– Tài liệu tiếng Việt phong phú
– Cộng đồng hỗ trợ nhiệt tình
– Phù hợp từ dự án nhỏ đến hệ thống lớn

Bạn đã sẵn sàng khám phá thế giới Vue chưa?
Hãy tiếp tục đọc để hiểu sâu hơn!

Vue
– Framework Linh Hoạt Theo Nhu Cầu {#the-progressive-framework}

🚀 Vue không chỉ là một framework, mà là cả một hệ sinh thái đáp ứng hầu hết nhu cầu phát triển giao diện web.
Nhưng môi trường web cực kỳ đa dạng
– từ trang đơn giản đến ứng dụng phức tạp.
Hiểu điều này, Vue được thiết kế để linh hoạt và có thể áp dụng từng phần tùy theo nhu cầu của bạn:

Các Cách Sử Dụng Vue Phổ Biến 💡

  • Tích hợp đơn giản:
    Nâng cấp HTML tĩnh mà không cần build
  • Web Components:
    Nhúng vào bất kỳ trang nào như component độc lập
  • SPA (Single-Page Application):
    Ứng dụng một trang hiện đại
  • SSR (Server-Side Rendering):
    Render phía server cho SEO tốt hơn
  • SSG (Static Site Generation):
    Tạo site tĩnh hiệu năng cao (phù hợp với Jamstack)
  • Đa nền tảng:
    Desktop, mobile, WebGL và cả terminal!

💡 Ví dụ thực tế tại Việt Nam:
Bạn có thể dùng Vue để:

– Tạo landing page đơn giản (HTML tĩnh + Vue)
– Xây dựng admin dashboard (SPA)
– Phát triển website tin tức cần SEO (SSR/SSG)
– Nhúng component đặt hàng vào website WordPress (Web Components)

⚠️ Lưu ý cho người mới:
Nếu các khái niệm trên có vẻ phức tạp, đừng lo!
Bạn chỉ cần biết cơ bản HTML & JavaScript là có thể bắt đầu ngay.
Các hướng dẫn của Vue rất dễ tiếp cận cho người mới.

🎯 Điểm mấu chốt:
Dù bạn dùng Vue theo cách nào, kiến thức nền tảng về cách Vue hoạt động vẫn giống nhau.
Điều này có nghĩa:

  • Nếu là người mới:
    Kiến thức học được hôm nay vẫn hữu ích khi bạn phát triển lên các dự án phức tạp hơn
  • Nếu là developer có kinh nghiệm:
    Bạn có thể chọn cách triển khai tối ưu nhất cho từng bài toán cụ thể

🔧 Gợi ý công cụ cho dev Việt:

– Vite:
Build tool cực nhanh để khởi tạo dự án Vue

– VuePress:
Tạo documentation site bằng Vue

– Nuxt.js:
Framework mạnh mẽ cho SSR/SSG

👉 Đây chính là lý do Vue được gọi là “Framework Linh Hoạt”
– nó có thể phát triển cùng bạn và thích ứng với mọi nhu cầu từ đơn giản đến phức tạp!

Đọc thêm về các cách sử dụng Vue nếu bạn muốn tìm hiểu sâu hơn.

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

🚀 Trong các dự án Vue sử dụng build tool, chúng ta thường viết component bằng định dạng Single-File Component (Component Đơn Tập Tin, viết tắt SFC), có đuôi file là *.vue.
Đúng như tên gọi, SFC gói gọn toàn bộ logic (JavaScript), template (HTML) và style (CSS) của component trong MỘT file duy nhất.

💡 Ví dụ thực tế: Giống như khi bạn đóng gói đồ dùng vào một vali khi đi du lịch
– mọi thứ được sắp xếp gọn gàng trong một chỗ!

Cấu trúc cơ bản của SFC {#sfc-structure}

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<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:
– <script>:
Chứa logic JavaScript (có thể dùng Options API hoặc Composition API)
– <template>:
Chứa mã HTML template
– <style>:
Chứa CSS styling (thêm scoped để CSS chỉ áp dụng cho component này)

Tại sao nên dùng SFC?
{#why-sfc}

⚡ SFC là đặc trưng nổi bật của Vue và được khuyên dùng khi:

– Dự án của bạn cần build setup (Webpack, Vite,…)
– Muốn tổ chức code gọn gàng, dễ bảo trì
– Cần tận dụng các tính năng mạnh mẽ như CSS scoping, hot-reload

💡 Lưu ý: Nếu dự án đơn giản không cần build tool, bạn có thể dùng Vue mà không cần SFC.

🔧 Công cụ hỗ trợ: Các IDE phổ biến ở Việt Nam như VS Code, WebStorm đều hỗ trợ tốt cho .vue files với plugins như Volar.

👉 Muốn tìm hiểu sâu hơn về SFC?
Xem ngay hướng dẫn chi tiết về SFC.
Nhưng trước mắt cứ yên tâm rằng Vue sẽ tự động xử lý mọi cấu hình build tool phức tạp giúp bạn!

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

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

## 🏗️ Options API {#options-api}

Với Options API, chúng ta định nghĩa logic component bằng một object chứa các options như `data`, `methods`, `mounted`. Các thuộc tính này sẽ được truy cập thông qua `this` - trỏ đến instance của component:

```vue
<script>
export default {
  // Các property trong data() sẽ trở thành reactive state
  // và có thể truy cập qua `this`
  data() {
    return {
      count: 0
    }
  },

  // Methods là các hàm thay đổi state và kích hoạt cập nhật
  // Có thể bind làm event handler 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
  mounted() {
    console.log(`Giá trị ban đầu là ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Đếm: {{ count }}</button>
</template>

Thử trên Playground

💡 Lưu ý: Options API phù hợp cho người mới vì:

– Cấu trúc rõ ràng theo từng nhóm (data, methods, lifecycle…)
– Tương tự class-based component trong OOP
– Ít phải quan tâm đến reactivity system

🧩 Composition API {#composition-api}

Với Composition API, chúng ta định nghĩa logic bằng các hàm API được import.
Trong Single File Component (SFC), Composition API thường dùng với <script setup>.
Thuộc tính setup giúp Vue thực hiện các biến đổi khi biên dịch để giảm boilerplate code.

Cùng một component trên nhưng dùng Composition API:

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

// Khai báo reactive state
const count = ref(0)

// Hàm thay đổi state
function increment() {
  count.value++
}

// Lifecycle hook
onMounted(() => {
  console.log(`Giá trị ban đầu là ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Đếm: {{ count }}</button>
</template>

Thử trên Playground

🎯 Điểm mạnh của Composition API:
– Tổ chức logic thành các hàm có thể tái sử dụng
– Linh hoạt hơn cho các component phức tạp
– TypeScript hỗ trợ tốt hơn
– Ít phụ thuộc vào this hơn

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

Cả 2 phong cách đều có thể xử lý hầu hết các trường hợp sử dụng thông thường.
Chúng chỉ là 2 giao diện khác nhau của cùng một hệ thống cốt lõi.

🔍 So sánh chi tiết:

Options API phù hợp khi:
– Bạn mới học Vue hoặc đến từ background OOP
– Làm dự án nhỏ, không dùng build tool
– Thích cấu trúc code được tổ chức sẵn theo nhóm

Composition API phù hợp khi:
– Xây dựng ứng dụng lớn, phức tạp
– Cần tái sử dụng logic giữa các component
– Dùng TypeScript
– Muốn kiểm soát chi tiết reactivity system

💎 Lời khuyên từ Vue team:

  • Cho người mới: Chọn phong cách nào bạn thấy dễ hiểu hơn.
    Các khái niệm cốt lõi đều tương đồng.

  • Cho production:

  • Dùng Options API nếu:

    • Không dùng build tools
    • Làm progressive enhancement
    • Dự án có độ phức tạp thấp

  • Dùng Composition API + SFC nếu:

    • Xây dựng ứng dụng hoàn chỉnh
    • Cần scale tốt về sau

⚠️ Chú ý: Bạn không cần phải chọn 1 phong cách duy nhất!
Có thể dùng cả 2 trong cùng dự án và chuyển đổi khi cần.

Bạn có thể xem thêm so sánh chi tiết tại:
Composition API FAQ

🚀 Mẹo: Trong docs Vue, bạn có thể chuyển đổi giữa 2 phong cách bằng công tắc API Preference trên sidebar!
“`

Bạn vẫn còn thắc mắc?
{#still-got-questions}

Hãy xem ngay phần Câu hỏi thường gặp (FAQ) của chúng tôi để tìm câu trả lời nhé!
❓

💡 Lưu ý: Nếu không tìm thấy câu trả lời trong FAQ, bạn có thể tham gia các cộng đồng developer Việt Nam như:

– VueJS Vietnam trên Facebook
– Diễn đàn viblo.asia
– Nhóm Discord/HackMD chuyên về frontend

Chọn lộ trình học phù hợp với bạn {#pick-your-learning-path}

Mỗi developer có cách học khác nhau
– quan trọng là bạn cảm thấy thoải mái và hiệu quả nhất!
🚀 Dưới đây là các lựa chọn dành cho bạn:

🎯 Điểm mấu chốt: Dù chọn cách nào, chúng tôi vẫn khuyên bạn nên xem qua tất cả nội dung để có cái nhìn toàn diện nhất!

Học qua Tutorial

Phù hợp với những bạn thích học qua thực hành, làm project thực tế ngay.


Đọc Hướng dẫn chi tiết

Bạn sẽ hiểu sâu từng khía cạnh của framework với giải thích tỉ mỉ.


Khám phá Ví dụ mẫu

Học nhanh qua các ví dụ thực tế về tính năng cốt lõi và xử lý giao diện.

⚡ Gợi ý cho developer Việt Nam:
– Nếu bạn là người mới, hãy bắt đầu với Tutorial kết hợp ví dụ mẫu
– Đã có kinh nghiệm?
Đi sâu vào Guide để hiểu bản chất
– Cần giải pháp nhanh?
Xem ngay phần Examples để “code theo”

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM