当前位置：首页 > VUE

vue2.0实现原理

2026-02-23 18:52:47VUE

Vue 2.0 核心实现原理

Vue 2.0 的核心实现基于响应式系统、虚拟DOM和模板编译三大模块。通过数据劫持结合观察者模式实现数据驱动视图的更新。

响应式系统

Vue 2.0 使用 Object.defineProperty 对数据对象进行递归劫持。当数据被访问或修改时，触发 getter 和 setter 拦截。

数据劫持代码示例：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('get:', key);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log('set:', key);
      val = newVal;
    }
  });
}

依赖收集通过 Dep 和 Watcher 实现：

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

虚拟DOM与Diff算法

Vue 2.0 通过虚拟DOM提升渲染性能。当数据变化时，生成新的虚拟DOM树，通过Diff算法对比新旧树的差异。

Diff算法采用同级比较策略，通过双指针优化对比过程。
Key的作用是帮助识别节点身份，避免不必要的重新渲染。

模板编译

Vue 模板通过编译转换为渲染函数：

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

// 编译结果示例
function render() {
  with(this) {
    return _c('div', { attrs: { "id": "app" } }, [_v("Hello " + _s(name))]);
  }
}

组件化实现

Vue组件本质是可复用的Vue实例：

每个组件都有独立的渲染Watcher
父子组件通过事件和props通信
组件生命周期由内部调度系统管理

批量异步更新

Vue通过队列实现异步更新：

// 更新队列实现
let queue = [];
let waiting = false;

function queueWatcher(watcher) {
  queue.push(watcher);
  if (!waiting) {
    waiting = true;
    nextTick(flushSchedulerQueue);
  }
}

vue2.0实现原理