当前位置：首页 > VUE

vue数据驱动模拟实现

2026-02-24 03:47:45VUE

Vue 数据驱动模拟实现

Vue 的数据驱动核心基于响应式系统，通过劫持数据变化自动更新视图。以下是简化版实现思路：

响应式数据劫持

使用 Object.defineProperty 或 Proxy 监听数据变化。以 Proxy 为例：

vue数据驱动模拟实现

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 依赖收集
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

依赖收集与触发

维护一个全局依赖关系映射表：

const targetMap = new WeakMap();

function track(target, key) {
  if (currentEffect) {
    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(currentEffect);
  }
}

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

虚拟 DOM 与渲染

模拟虚拟 DOM 的简化实现：

vue数据驱动模拟实现

function createVNode(tag, props, children) {
  return { tag, props, children };
}

function mount(vnode, container) {
  const el = document.createElement(vnode.tag);
  for (const key in vnode.props) {
    el.setAttribute(key, vnode.props[key]);
  }
  if (typeof vnode.children === 'string') {
    el.textContent = vnode.children;
  } else {
    vnode.children.forEach(child => mount(child, el));
  }
  container.appendChild(el);
  vnode.$el = el;
}

组件系统模拟

实现基础组件逻辑：

function createApp(component) {
  return {
    mount(selector) {
      const container = document.querySelector(selector);
      let isMounted = false;
      let prevVNode;

      effect(() => {
        if (!isMounted) {
          prevVNode = component.render();
          mount(prevVNode, container);
          isMounted = true;
        } else {
          const newVNode = component.render();
          patch(prevVNode, newVNode);
          prevVNode = newVNode;
        }
      });
    }
  };
}

数据绑定示例

组合上述功能实现双向绑定：

const App = {
  data: reactive({ count: 0 }),
  render() {
    return createVNode('div', {}, [
      createVNode('h1', {}, `Count: ${this.data.count}`),
      createVNode('button', { 
        onClick: () => this.data.count++ 
      }, 'Increment')
    ]);
  }
};

createApp(App).mount('#app');