vue 中的数据代理

在 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.data
  vm._data = typeof data === 'function' ? data.call(vm, vm) : data || {}

  // 数据代理
  const keys = Object.keys(vm._data)
  let i = keys.length
  while (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 = newVal
      dep.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 = effect
  effect() // 立即执行一次
  activeEffect = null
}

// 5. 模拟 Vue 实例
function Vue(options) {
  this._data = options.data
  observe(this._data)

  // 代理 _data 到 this
  Object.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 = null

function track(target, key) {
  if (!activeEffect) return

  let 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) return

  const 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 = fn
  fn()
  activeEffect = null
}

const state = reactive({
  count: 0,
  name: 'Vue3'
})

effect(() => {
  console.log('视图更新:', state.count, state.name)
})

state.count++     // 触发更新
state.name = 'Vue3 Proxy'