当前位置：首页 > VUE

vue2.0源码实现

2026-02-20 15:34:30VUE

Vue 2.0 核心实现原理

Vue 2.0 的核心实现基于响应式系统、虚拟DOM和模板编译。以下是关键实现要点：

响应式系统 通过 Object.defineProperty 实现数据劫持，在 getter 中收集依赖（Watcher），在 setter 中触发更新。每个组件实例对应一个 Watcher 实例，负责监听数据变化并触发重新渲染。

虚拟DOM与Diff算法 Vue 使用虚拟DOM提高渲染效率，通过比较新旧虚拟DOM树的差异（Diff算法），最小化真实DOM操作。核心Diff策略是同层级比较，通过双指针优化对比过程。

模板编译 模板通过编译器转换为渲染函数，经历以下阶段：

解析器将模板转换为AST（抽象语法树）
优化器标记静态节点
代码生成器将AST转换为渲染函数代码

简易实现示例

以下是简化版的响应式系统实现代码：

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

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    const value = this.vm[this.exp];
    Dep.target = null;
    return value;
  }
  update() {
    this.cb.call(this.vm);
  }
}

function observe(data) {
  if (!data || typeof data !== 'object') return;
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}

function defineReactive(obj, key, val) {
  const dep = new Dep();
  observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      if (Dep.target) dep.addSub(Dep.target);
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      dep.notify();
    }
  });
}

生命周期钩子实现

Vue 生命周期通过调用预定义的钩子函数实现，核心流程如下：

function callHook(vm, hook) {
  const handlers = vm.$options[hook];
  if (handlers) {
    handlers.forEach(handler => handler.call(vm));
  }
}

// 组件初始化时依次调用
callHook(vm, 'beforeCreate');
initState(vm);
callHook(vm, 'created');
mountComponent();
callHook(vm, 'beforeMount');
// ...挂载完成
callHook(vm, 'mounted');

组件系统实现

组件系统基于原型继承实现复用：

vue2.0源码实现

function createComponent(Ctor, data, context, children) {
  const baseCtor = context.$options._base;
  if (typeof Ctor === 'object') {
    Ctor = baseCtor.extend(Ctor);
  }
  // 安装组件钩子
  installComponentHooks(data);
  // 返回vnode
  return new VNode(
    `vue-component-${Ctor.cid}`,
    data, undefined, undefined, undefined, context,
    { Ctor, children }
  );
}

以上实现展示了Vue 2.0的核心机制，实际源码还包含更多优化和边界情况处理。完整实现可参考官方仓库的src/core目录。

标签: 源码