当前位置：首页 > VUE

自实现vue

2026-02-10 11:58:29VUE

自实现 Vue.js 的核心思路

Vue.js 的核心是一个响应式系统，结合虚拟 DOM 和组件化设计。以下是实现简化版 Vue 的关键步骤。

响应式数据绑定

通过 Object.defineProperty 或 Proxy 实现数据劫持。当数据变化时自动更新视图。

class Observer {
  constructor(data) {
    this.walk(data);
  }
  walk(data) {
    if (!data || typeof data !== 'object') return;
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
    });
  }
  defineReactive(obj, key, val) {
    this.walk(val);
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        Dep.target && dep.addSub(Dep.target);
        return val;
      },
      set(newVal) {
        if (newVal === val) return;
        val = newVal;
        dep.notify();
      }
    });
  }
}

依赖收集系统

实现发布-订阅模式，管理依赖关系。

自实现vue

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
Dep.target = null;

编译模板

将模板转换为渲染函数，解析指令和插值表达式。

class Compiler {
  constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el);
    this.compile(this.$el);
  }
  compile(node) {
    Array.from(node.childNodes).forEach(node => {
      if (this.isElement(node)) {
        this.compileElement(node);
      } else if (this.isInterpolation(node)) {
        this.compileText(node);
      }
      if (node.childNodes.length) {
        this.compile(node);
      }
    });
  }
  // 实现具体编译逻辑...
}

虚拟 DOM 实现

创建轻量级的 DOM 描述对象，通过 diff 算法高效更新。

自实现vue

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

function patch(oldVnode, vnode) {
  // 实现 diff 算法...
}

组件系统

实现组件注册和生命周期管理。

Vue.component = function(name, component) {
  this.options.components[name] = component;
};

function initLifecycle(vm) {
  // 实现生命周期钩子...
}

完整架构整合

将各模块组合成完整框架。

class Vue {
  constructor(options) {
    this.$options = options;
    this._data = options.data;
    new Observer(this._data);
    new Compiler(options.el, this);
  }
}