在 Vue 中，數據代理（Data Proxy） 是 Vue 實現 MVVM 模式 的關鍵技術之一。Vue 使用數據代理讓你可以通過 this.message 訪問 data.message，而不需要寫 this.data.message —— 這大大簡化了模板和邏輯代碼。

我們來深入理解它的本質、實現原理和源碼體現。

🔹 什么是數據代理？

Vue 實例將 data、props、computed 等屬性“代理”到 vm（Vue 實例）自身上，從而讓我們能直接通過 this.xx 訪問，而不必每次訪問 this._data.xx。

? 示例：數據代理的使用效果

const vm = new Vue({data: {message: 'hello'}
})console.log(vm.message) // 實際上是 vm._data.message

🧠 數據代理的實現原理（以 Vue 2 為例）

Vue 2 中通過 Object.defineProperty 實現數據代理。

👉 源碼簡化模擬：

function proxy(target, sourceKey, key) {Object.defineProperty(target, key, {get() {return target[sourceKey][key]},set(val) {target[sourceKey][key] = val}})
}

Vue 實例化時，會遍歷 data 中的所有屬性，調用 proxy(vm, ‘_data’, key) 將它們掛載到實例 vm 上。

🔧 Vue 2 中相關源碼（core/instance/state.js）

function initData(vm) {const data = vm.$options.datavm._data = typeof data === 'function' ? data.call(vm, vm) : data || {}// 數據代理const keys = Object.keys(vm._data)let i = keys.lengthwhile (i--) {proxy(vm, '_data', keys[i])}observe(vm._data)
}

📌 Vue 3 的處理方式

Vue 3 中由于響應式改為使用 Proxy，所以數據代理并不是必須通過 defineProperty 顯式定義，而是由 reactive() 和 ref() 本身提供的響應式代理能力。

import { reactive } from 'vue'const state = reactive({ count: 0 })console.log(state.count) // 已被代理，無需顯式掛載到組件實例上

Vue 3 更加模塊化，組件實例并不自動把數據代理到 this 上，尤其在

🧠 為什么要用數據代理？

簡化訪問：

• 不用寫 this._data.xxx，直接 this.xxx

實現雙向綁定：

• v-model 語法簡潔，背后依賴于代理 + 響應式

方便調試和語法提示：

• IDE 能提示實例屬性；不用深層嵌套對象路徑

🔄 數據代理 vs 響應式代理

特性	數據代理	響應式代理
實現技術	Object.defineProperty（Vue 2）	Proxy（Vue 3）
目的	讓你能通過 this.key 訪問 data.key	追蹤依賴、觸發視圖更新
是否雙向綁定	否，單純轉發 getter/setter	是，配合響應式系統自動更新視圖
使用位置	Vue 實例、組件	所有響應式狀態（ref、reactive）

? 小結

• 數據代理是為了簡化訪問方式，不是響應式的根本機制。
• Vue 2 中通過 Object.defineProperty 將 data 的屬性代理到 Vue 實例上。
• Vue 3 中響應式是通過 Proxy 實現，數據代理的需求被弱化（但原理仍然存在）。
• 它是 MVVM 中 ViewModel 作為橋梁的一部分。

小型 Vue 響應式系統（含數據代理）

// 1. 數據代理
function proxy(vm, sourceKey, key) {Object.defineProperty(vm, key, {get() {return vm[sourceKey][key]},set(val) {vm[sourceKey][key] = val}})
}// 2. 響應式轉換（核心 Observer）
function defineReactive(obj, key, val) {const dep = new Dep()Object.defineProperty(obj, key, {get() {dep.depend()return val},set(newVal) {val = newValdep.notify()}})
}// 3. 對整個 data 對象做響應式處理
function observe(obj) {Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
}// 4. 依賴收集器
class Dep {constructor() {this.subscribers = new Set()}depend() {if (activeEffect) {this.subscribers.add(activeEffect)}}notify() {this.subscribers.forEach(effect => effect())}
}let activeEffect = null
function watchEffect(effect) {activeEffect = effecteffect() // 立即執行一次activeEffect = null
}// 5. 模擬 Vue 實例
function Vue(options) {this._data = options.dataobserve(this._data)// 代理 _data 到 thisObject.keys(this._data).forEach(key => {proxy(this, '_data', key)})
}

// 創建 Vue 實例
const vm = new Vue({data: {message: 'Hello',count: 1}
})// 綁定“視圖更新”邏輯
watchEffect(() => {console.log('視圖更新：', vm.message, vm.count)
})// 修改數據，自動觸發“視圖更新”
vm.message = 'Hello Vue'
vm.count++

Vue 3 響應式系統簡易實現（模擬核心功能）

// 1. 依賴收集器
const targetMap = new WeakMap()
let activeEffect = nullfunction track(target, key) {if (!activeEffect) returnlet depsMap = targetMap.get(target)if (!depsMap) {depsMap = new Map()targetMap.set(target, depsMap)}let deps = depsMap.get(key)if (!deps) {deps = new Set()depsMap.set(key, deps)}deps.add(activeEffect)
}function trigger(target, key) {const depsMap = targetMap.get(target)if (!depsMap) returnconst deps = depsMap.get(key)if (deps) {deps.forEach(effect => effect())}
}// 2. 創建響應式對象
function reactive(target) {return new Proxy(target, {get(obj, key) {track(obj, key)return Reflect.get(obj, key)},set(obj, key, value) {const result = Reflect.set(obj, key, value)trigger(obj, key)return result}})
}// 3. 注冊副作用（自動運行函數）
function effect(fn) {activeEffect = fnfn()activeEffect = null
}

const state = reactive({count: 0,name: 'Vue3'
})effect(() => {console.log('視圖更新:', state.count, state.name)
})state.count++     // 觸發更新
state.name = 'Vue3 Proxy'