Hệ thống reactivity của Vue 3 hoạt động bên dưới như thế nào?

Question

Accepted Answer

Reactivity của Vue 3 được xây dựng trên **Proxy** của JavaScript. Khi bạn làm cho state trở nên reactive, Vue bọc nó trong một Proxy **chặn các thao tác đọc và ghi**, cho phép nó **track** xem effect nào phụ thuộc vào thuộc tính nào, và **trigger** các effect đó chạy lại khi dữ liệu thay đổi.

## Cơ chế cốt lõi: track khi đọc, trigger khi ghi

```js
// mô hình tư duy đơn giản hóa của reactive()
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // ghi nhận "effect hiện tại phụ thuộc vào obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // chạy lại mọi effect phụ thuộc vào obj.key
      return true;
    },
  });
}
```

Đọc một thuộc tính sẽ **track** effect đang chạy như một dependency; ghi nó sẽ **trigger** mọi effect đã đọc nó. Đây là cách Vue biết *chính xác* component render hoặc computed nào cần cập nhật khi một thuộc tính cụ thể thay đổi.

## Effect kết nối tất cả lại

```js
// render của component, computed, và watcher đều chạy bên trong một "effect"
effect(() => {
  document.body.innerHTML = count.value; // đọc count.value sẽ track effect này
});
count.value++; // trigger effect → nó chạy lại → DOM cập nhật
```

Khi một effect chạy, Vue đánh dấu nó là "active" để mọi thao tác đọc reactive trong lúc đó được liên kết ngược về nó. Thay đổi một dependency sau này, và chỉ các effect bị ảnh hưởng mới chạy lại.

## Tại sao Proxy (Vue 3) tốt hơn Object.defineProperty (Vue 2)

```js
// Vue 2 dùng Object.defineProperty theo từng thuộc tính, KHÔNG thể phát hiện:
this.obj.newProp = 1;   // ❌ thêm một thuộc tính mới (cần Vue.set)
this.arr[0] = 5;         // ❌ gán theo index
this.arr.length = 0;     // ❌ thay đổi length

// Proxy của Vue 3 chặn TẤT CẢ thao tác, kể cả key mới, xóa, và mảng ✅
```

Proxy chặn *toàn bộ object* (mọi key, thêm vào, xóa đi, biến đổi mảng), loại bỏ các hạn chế nổi tiếng của Vue 2 — không còn cần các giải pháp tạm `Vue.set`.

## ref và reactive bên trong

```text
reactive(obj) → trả về một Proxy của object
ref(value)    → trả về một object { value } mà việc truy cập .value được track
                (để primitive có thể reactive — Proxy chỉ bọc được object)
```

## Tại sao điều này quan trọng

Hiểu mô hình Proxy track/trigger giải thích *tại sao* Vue hiệu quả đến vậy (nó chỉ cập nhật các effect thực sự phụ thuộc vào dữ liệu đã thay đổi — reactivity chi tiết) và *tại sao* các hạn chế cũ của Vue 2 tồn tại và đã biến mất trong Vue 3.

Nó cũng làm rõ các quy tắc thực tế: tại sao `reactive` cần object (Proxy không bọc được primitive, nên có `ref`), và tại sao destructure một `reactive` phá vỡ tracking (bạn tách giá trị khỏi sự chặn get/set của Proxy).