当前位置：首页 > VUE

vue 实现原理

2026-01-13 08:43:30VUE

Vue 实现原理

Vue.js 是一个渐进式 JavaScript 框架，其核心实现原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。

响应式系统

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据发生变化时，依赖该数据的视图会自动更新。

Vue 2 的响应式实现示例：

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

Vue 3 改用 Proxy 实现：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`get ${key}`);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      console.log(`set ${key}:${value}`);
      return Reflect.set(target, key, value);
    }
  });
}

虚拟 DOM

Vue 通过虚拟 DOM 提高渲染效率。当状态变化时，Vue 会生成新的虚拟 DOM 树，通过 diff 算法比较新旧虚拟 DOM，计算出最小更新操作，然后批量更新真实 DOM。

虚拟 DOM 的简单实现：

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

function patch(oldVNode, newVNode) {
  // diff 算法实现
}

模板编译

Vue 的模板会被编译成渲染函数。这个过程包括：

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

示例编译结果：

function render() {
  with(this) {
    return _c('div', { attrs: { id: 'app' } }, [
      _c('h1', [_v(message)]),
      _c('button', { on: { click: handleClick } }, [_v('Click me')])
    ]);
  }
}

组件化机制

Vue 组件是可复用的 Vue 实例。每个组件都有独立的响应式数据、模板和生命周期。组件系统通过以下方式实现：

组件注册和继承机制
组件通信（props/emit）
插槽系统
生命周期管理

组件示例：

Vue.component('my-component', {
  props: ['title'],
  template: '<div>{{ title }}</div>'
});

依赖收集与派发更新

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

每个响应式属性都有一个 Dep 实例
当属性被访问时，当前 Watcher 会被添加到 Dep 中
当属性变化时，Dep 会通知所有 Watcher 更新

简化实现：

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

class Watcher {
  update() {
    // 执行更新
  }
}

这些核心机制共同构成了 Vue 的响应式、高效和组件化的特性。

vue 实现原理