当前位置：首页 > VUE

vue如何实现原理

2026-02-10 19:44:01VUE

Vue 的核心实现原理

Vue 的核心原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是关键实现原理的分解：

响应式系统

Vue 2.x 使用 Object.defineProperty 实现数据劫持，通过 getter 和 setter 监听对象属性的访问和修改。当数据变化时，触发依赖收集（Dep）中注册的 Watcher 更新视图。

vue如何实现原理

// 简化版响应式实现
function defineReactive(obj, key) {
  let value = obj[key];
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依赖
      return value;
    },
    set(newVal) {
      if (newVal === value) return;
      value = newVal;
      dep.notify(); // 触发更新
    }
  });
}

Vue 3.x 改用 Proxy 代理整个对象，解决了 Vue 2.x 对数组和新增属性的监听限制：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    }
  });
};

虚拟 DOM 与 Diff 算法

Vue 将模板编译为虚拟 DOM（VNode），通过 Diff 算法比对新旧 VNode，最小化 DOM 操作：

vue如何实现原理

// 简化的 Diff 逻辑
function patch(oldVnode, newVnode) {
  if (sameVnode(oldVnode, newVnode)) {
    patchVnode(oldVnode, newVnode);
  } else {
    const parent = oldVnode.parentNode;
    parent.replaceChild(createElm(newVnode), oldVnode.el);
  }
}

模板编译

Vue 的模板通过编译器转换为渲染函数（render function），分为以下步骤：

解析：将模板字符串解析为 AST（抽象语法树）。
优化：标记静态节点以减少运行时比对。
生成代码：将 AST 转换为可执行的渲染函数代码。

// 示例：模板 `<div>{{ message }}</div>` 编译结果
function render() {
  return _c('div', [_v(_s(message))]);
}

组件化机制

每个 Vue 组件实例化时：

初始化数据响应式。
创建渲染 Watcher 监听数据变化。
通过 $mount 挂载时触发首次渲染，生成虚拟 DOM 并更新到真实 DOM。

// 组件初始化流程
Vue.prototype._init = function(options) {
  initState(this); // 初始化数据响应式
  if (this.$options.el) {
    this.$mount(this.$options.el); // 挂载
  }
};