当前位置：首页 > VUE

proxy实现vue

2026-03-27 22:34:26VUE

使用Proxy实现Vue响应式系统

Vue 3.x 使用 Proxy 替代了 Vue 2.x 的 Object.defineProperty 来实现响应式系统。以下是核心实现方法：

创建响应式对象

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key) // 依赖收集
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver)
      trigger(target, key) // 触发更新
      return true
    }
  })
}

依赖收集与触发

proxy实现vue

const targetMap = new WeakMap()

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(effect => effect())
}

实现计算属性

function computed(getter) {
  let value
  let dirty = true

  const effect = effectFn(getter, {
    lazy: true,
    scheduler() {
      dirty = true
      trigger(obj, 'value')
    }
  })

  const obj = {
    get value() {
      if (dirty) {
        value = effect()
        dirty = false
      }
      track(obj, 'value')
      return value
    }
  }

  return obj
}

实现简易Vue实例

创建Vue实例

proxy实现vue

class Vue {
  constructor(options) {
    this.$options = options
    this._data = options.data()
    this.$el = document.querySelector(options.el)

    this.proxy = new Proxy(this, {
      get(target, key) {
        if (key in target._data) {
          return target._data[key]
        }
        return target[key]
      },
      set(target, key, value) {
        if (key in target._data) {
          target._data[key] = value
          target.update()
          return true
        }
        target[key] = value
        return true
      }
    })

    this.update = this.update.bind(this)
    this.effect = effectFn(() => {
      this.update()
    })

    this.update()
  }

  update() {
    this.$el.innerHTML = this.$options.render.call(this.proxy)
  }
}

使用示例

HTML部分

<div id="app"></div>

JavaScript部分

const app = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  render() {
    return `
      <div>
        <p>Count: ${this.count}</p>
        <button onclick="app.count++">Increment</button>
      </div>
    `
  }
})