Vue Reactivity Fundamentals

Mục lục

1. Diagram

• Reactivity System Overview
• ref() vs reactive()
• Dependency Tracking Flow
• Ref Unwrapping Behavior
• Deep Reactivity

2. Tổng quan

3. ref() - Reactive References

• Cách sử dụng cơ bản
• Trong Template
• Với <script setup>
• Tại sao cần .value?

4. reactive() - Reactive Objects

• Cách sử dụng
• Reactive Proxy vs Original
• Limitations

5. Deep Reactivity

• ref() với Deep Reactivity
• Opt-out: shallowRef()

6. DOM Update Timing

• Async Updates
• nextTick()

7. Ref Unwrapping Rules

• Top-level trong Template
• Nested Property trong Template
• Reactive Object Property
• Array/Collection Element

8. So sánh ref() vs reactive()

9. Best Practices

10. Kết luận

---

1. Diagram

Reactivity System Overview

            Component Instance (Data / Methods / Computed)
                           |
                           v
                    Vue Template (HTML-based)
                           |
        ------------------------------------------------
        |                      |                      |
   {{ interpolation }}     v-bind / :attr         v-on / @event
        |                      |                      |
     Text Node           Attribute Binding        Event Listener
        |                      |                      |
        -------------------- Reactivity --------------------
                           |
                           v
                    Virtual DOM Diff
                           |
                           v
                       Real DOM Update

ref() vs reactive()

• ref():
  • Tạo reference phản ứng cho giá trị nguyên thủy.
  • Cần .value để truy cập/gán giá trị.
• reactive():
  • Tạo đối tượng phản ứng sâu cho cả đối tượng.
  • Không cần .value, truy cập trực tiếp như đối tượng bình thường.

Dependency Tracking Flow

• Vue theo dõi sự thay đổi của state qua các bước:
  1. Component khởi tạo → đăng ký các phụ thuộc (dependencies).
  2. Khi state thay đổi, Vue biết được component nào cần cập nhật.
  3. Chỉ những phần tử trong DOM liên quan đến component đó mới được cập nhật.

Ref Unwrapping Behavior

• Trong template, Vue tự động “bóc vỏ” (unwrap) giá trị của ref.
• Ví dụ:
  • `` → truy cập giá trị bên trong myRef.
  • Không cần viết `` trong template.

Deep Reactivity

• reactive() hỗ trợ reactivity sâu cho các thuộc tính của đối tượng.
• Thay đổi thuộc tính con của đối tượng cũng sẽ kích hoạt cập nhật giao diện.
• Ví dụ:

  const state = reactive({ count: 0, user: { name: "John" } });
  state.user.name = "Doe"; // Giao diện tự động cập nhật
  

---

2. Tổng quan

• Hệ thống reactivity của Vue cho phép tự động cập nhật giao diện khi state thay đổi.
• Dựa trên việc theo dõi và quản lý các phụ thuộc giữa state và giao diện.
• Hai API chính để tạo reactivity là ref() và reactive().

---

3. ref() - Reactive References

Cách sử dụng cơ bản

• ref() được dùng để tạo ra một reference phản ứng.
• Cú pháp: const myRef = ref(initialValue).
• myRef bây giờ là một đối tượng có thuộc tính value chứa initialValue.

Trong Template

• Khi sử dụng trong template, không cần phải thêm .value.
• Ví dụ:

  <template>
    <div></div>
    <!-- Đúng -->
    <div></div>
    <!-- Vẫn đúng nhưng không cần thiết -->
  </template>
  

Với ` ```

Tại sao cần `.value`?

- `.value` được sử dụng để truy cập hoặc gán giá trị cho `ref`. - Đây là cách Vue phân biệt giữa giá trị nguyên thủy và đối tượng phản ứng. - Khi gán giá trị mới cho `ref`, phải sử dụng `.value`. ```javascript myRef.value = "New Value"; ``` ---

4. reactive() - Reactive Objects

Cách sử dụng

- `reactive()` được dùng để tạo ra một đối tượng phản ứng. - Cú pháp: `const state = reactive({ /* properties */ })`. - Tất cả các thuộc tính của đối tượng đều trở nên phản ứng.

Reactive Proxy vs Original

- `reactive()` trả về một proxy của đối tượng gốc. - Tất cả các thao tác trên proxy sẽ được chuyển tiếp đến đối tượng gốc. - Vue tự động theo dõi các thay đổi trên đối tượng gốc thông qua proxy.

Limitations

- Không thể sử dụng `reactive()` cho các kiểu dữ liệu nguyên thủy như `number`, `string`, `boolean`. - Chỉ sử dụng cho các đối tượng và mảng. - Đối với các giá trị nguyên thủy, sử dụng `ref()`. ---

5. Deep Reactivity

ref() với Deep Reactivity

- `ref()` cũng hỗ trợ deep reactivity. - Nếu gán một đối tượng cho `ref`, tất cả các thuộc tính của đối tượng đó đều trở nên phản ứng. - Ví dụ: ```javascript const state = ref({ count: 0 }); state.value.count = 1; // Giao diện tự động cập nhật ```

Opt-out: shallowRef()

- `shallowRef()` tạo ra một reference phản ứng nhưng không theo dõi sâu. - Chỉ có chính đối tượng được theo dõi, không phải các thuộc tính con của nó. - Ví dụ: ```javascript const state = shallowRef({ count: 0 }); state.value.count = 1; // Không kích hoạt cập nhật nếu chỉ thay đổi thuộc tính con ``` ---

6. DOM Update Timing

Async Updates

- Vue thực hiện cập nhật DOM một cách bất đồng bộ. - Nhiều thay đổi được gom nhóm lại và thực hiện trong cùng một lần render. - Điều này giúp tối ưu hiệu suất và giảm thiểu số lần cập nhật DOM.

nextTick()

- `nextTick()` cho phép thực hiện một hàm sau khi DOM được cập nhật. - Hữu ích khi cần thực hiện các thao tác phụ thuộc vào kết quả của việc cập nhật DOM. - Cú pháp: `nextTick(() => { /* code */ })`. ---

7. Ref Unwrapping Rules

1. Top-level trong Template

- Khi sử dụng `ref` ở cấp độ cao nhất trong template, Vue sẽ tự động "bóc vỏ" giá trị. - Ví dụ: ```html ```

2. Nested Property trong Template

- Đối với thuộc tính lồng nhau, cần phải sử dụng `.value` để truy cập. - Ví dụ: ```html ```

3. Reactive Object Property

- Đối với thuộc tính của đối tượng phản ứng, cũng cần sử dụng `.value` để truy cập. - Ví dụ: ```html ```

4. Array/Collection Element

- Đối với phần tử của mảng hoặc collection, cần sử dụng `.value` để truy cập. - Ví dụ: ```html ``` ---

8. So sánh ref() vs reactive()

| Tính năng | ref() | reactive() | | --------------------- | ---------------------- | ---------------------------- | | Kiểu dữ liệu | Nguyên thủy, đối tượng | Chỉ đối tượng | | Cách sử dụng | `const a = ref(0)` | `const state = reactive({})` | | Truy cập giá trị | `a.value` | `state.prop` | | Deep reactivity | Có (với đối tượng) | Có | | Proxy | Không | Có | | Tương thích với Array | Có (nhưng cần chú ý) | Có | ---

9. Best Practices

- Sử dụng `ref()` cho các giá trị nguyên thủy và `reactive()` cho các đối tượng. - Tránh lạm dụng reactivity, chỉ sử dụng khi cần thiết. - Hiểu rõ về cách Vue theo dõi và cập nhật DOM để tối ưu hiệu suất ứng dụng. ---

10. Kết luận

- Hệ thống reactivity là một trong những tính năng mạnh mẽ nhất của Vue. - Giúp tự động hóa việc cập nhật giao diện khi state thay đổi. - Cần nắm rõ cách sử dụng và các quy tắc liên quan đến reactivity để phát triển ứng dụng hiệu quả.