ระบบรีแอกทิวิตี้ของ Vue 3 ทำงานอย่างไรใต้ประทุน?

Question

Accepted Answer

รีแอกทิวิตี้ของ Vue 3 สร้างขึ้นจาก JavaScript **Proxies** เมื่อคุณทำให้สถานะเป็นแบบรีแอกทีฟ Vue จะห่อมันไว้ใน Proxy ซึ่ง **สกัดกั้นการอ่านและการเขียน** ให้ **ติดตาม** ว่าเอฟเฟกต์ใดขึ้นอยู่กับคุณสมบัติใด และ **ทริกเกอร์** เอฟเฟกต์เหล่านั้นให้ทำงานซ้ำเมื่อข้อมูลเปลี่ยนแปลง

## กลไกหลัก: ติดตามในการอ่าน ทริกเกอร์ในการเขียน

```js
// a simplified mental model of reactive()
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // record "the current effect depends on obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // re-run every effect that depended on obj.key
      return true;
    },
  });
}
```

การอ่านคุณสมบัติจะ **ติดตาม** เอฟเฟกต์ที่กำลังทำงานในขณะนี้เป็นการพึ่งพา การเขียน **ทริกเกอร์** เอฟเฟกต์ทั้งหมดที่อ่านมัน นี่คือวิธีที่ Vue รู้ว่า *ส่วนประกอบ* หรือ *computed* ใดที่ต้องอัปเดตเมื่อมีการเปลี่ยนแปลงคุณสมบัติเฉพาะ

## เอฟเฟกต์ที่มันเชื่อมโยงเข้าด้วยกัน

```js
// component render, computed, and watchers all run inside an "effect"
effect(() => {
  document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
```

เมื่อเอฟเฟกต์ทำงาน Vue จะทำเครื่องหมายเป็น "ทำงาน" เพื่อให้การอ่านแบบรีแอกทีฟใด ๆ ในระหว่างนั้นเชื่อมโยงกลับไปยังมัน เปลี่ยนการพึ่งพาภายหลัง และเอฟเฟกต์ที่ได้รับผลกระทบเท่านั้นจะทำงานซ้ำ

## ทำไม Proxy (Vue 3) ชนะ Object.defineProperty (Vue 2)

```js
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1;   // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5;         // ❌ index assignment
this.arr.length = 0;     // ❌ length changes

// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
```

Proxies สกัดกั้น *วัตถุทั้งหมด* (คีย์ใด ๆ การเพิ่มเติม การลบ การทำให้เกิดการเปลี่ยนแปลงอาร์เรย์) ลบข้อจำกัดที่รู้จักของ Vue 2 — ไม่มี `Vue.set` วิธีแก้ปัญหาอีกต่อไป

## ref เทียบกับ reactive ภายใน

```text
reactive(obj) → returns a Proxy of the object
ref(value)    → returns an object { value } whose .value access is tracked
                (so primitives can be reactive — Proxies only wrap objects)
```

## เหตุใดจึงมีความสำคัญ

การทำความเข้าใจรูปแบบ track/trigger Proxy อธิบาย *เหตุใด* Vue มีประสิทธิภาพมาก (มันอัปเดตเฉพาะเอฟเฟกต์ที่ขึ้นอยู่กับข้อมูลที่เปลี่ยนแปลง — รีแอกทิวิตี้ที่ละเอียด) และ *เหตุใด* ข้อจำกัดของ Vue 2 เก่า ๆ มีอยู่และหายไปใน Vue 3

นอกจากนี้ยังชี้แจงกฎปฏิบัติจริง: เหตุใด `reactive` ต้องการวัตถุ (Proxies ไม่สามารถห่อพื้นฐาน ดังนั้น `ref`) และเหตุใดการสลายตัวของ `reactive` จึงทำลายการติดตาม (คุณแยกค่าออกจากการสกัดกั้น get/set ของ Proxy)