当前位置：首页 > VUE

proxy实现vue

2026-02-10 12:48:15VUE

使用Proxy实现Vue响应式系统

Proxy是ES6引入的特性，能够拦截对象的操作，Vue3利用Proxy替代了Vue2中的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();
let activeEffect = null;

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 effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

实现计算属性

基于上述响应式系统，可以扩展实现计算属性：

proxy实现vue

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

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

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

  return obj;
}

实现模板编译

结合Proxy响应式系统，可以模拟Vue的模板编译：

function compile(template) {
  return function render(ctx) {
    const div = document.createElement('div');
    div.innerHTML = template.replace(/{{(.*?)}}/g, (_, exp) => {
      return exp.split('.').reduce((obj, k) => obj[k], ctx);
    });
    return div.firstChild;
  };
}

完整示例组合

将各部分组合成简易Vue实现：

class MiniVue {
  constructor(options) {
    this.$options = options;
    this.$data = reactive(options.data());
    this.proxyData();
    this.$el = document.querySelector(options.el);
    this.compile();
  }

  proxyData() {
    for (const key in this.$data) {
      Object.defineProperty(this, key, {
        get: () => this.$data[key],
        set: val => (this.$data[key] = val)
      });
    }
  }

  compile() {
    const render = compile(this.$options.template);
    effect(() => {
      const newNode = render(this.$data);
      this.$el.innerHTML = '';
      this.$el.appendChild(newNode);
    });
  }
}