Vue 如何實現響應式？

什麼是響應式？

響應式（Reactivity）是指：當資料改變時，畫面自動更新。Vue 的核心功能之一。

Vue 2：Object.defineProperty

Vue 2 使用 Object.defineProperty 攔截物件屬性的 get 和 set。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      // 收集依賴（追蹤哪些地方用到這個值）
      track()
      return val
    },
    set(newVal) {
      val = newVal
      // 觸發更新
      trigger()
    }
  })
}

Vue 2 的限制

• 無法偵測新增屬性：this.obj.newKey = value 不會觸發更新，需用 Vue.set()
• 無法偵測陣列索引修改：arr[0] = value 不觸發，需用 this.$set() 或陣列方法
• 深層巢狀物件：初始化時需遞迴遍歷，效能較差

Vue 3：Proxy

Vue 3 改用 ES6 的 Proxy 代理整個物件，解決了 Vue 2 的所有限制。

const handler = {
  get(target, key) {
    track(target, key) // 追蹤依賴
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    Reflect.set(target, key, value)
    trigger(target, key) // 觸發更新
    return true
  },
  deleteProperty(target, key) {
    Reflect.deleteProperty(target, key)
    trigger(target, key)
    return true
  }
}

const reactive = (obj) => new Proxy(obj, handler)

Vue 3 的優勢

特性	Vue 2 (defineProperty)	Vue 3 (Proxy)
新增屬性	❌ 需 Vue.set()	✅ 自動偵測
刪除屬性	❌ 不偵測	✅ 自動偵測
陣列索引	❌ 不偵測	✅ 自動偵測
Map / Set	❌ 不支援	✅ 支援
初始化效能	慢（遞迴遍歷）	快（lazy proxy）