当前位置：首页 > VUE

vue的实现原理

2026-02-25 14:50:02VUE

Vue 的实现原理

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

响应式系统

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 实现，能够更全面地拦截对象操作：

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

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 减少直接操作真实 DOM 的开销。当数据变化时，Vue 会生成新的虚拟 DOM 树，并通过 Diff 算法对比新旧树，找出最小变更应用到真实 DOM。

Diff 算法的核心是同层比较，通过双端对比和 key 优化效率：

function patch(oldVnode, newVnode) {
  if (sameVnode(oldVnode, newVnode)) {
    patchVnode(oldVnode, newVnode);
  } else {
    const parent = oldVnode.parentNode;
    parent.replaceChild(createElm(newVnode), oldVnode);
  }
}

模板编译

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

解析：将模板字符串转换为 AST（抽象语法树）。
优化：标记静态节点，避免重复渲染。
生成代码：将 AST 转换为可执行的渲染函数代码。

示例编译结果：

// 模板: <div id="app">{{ message }}</div>
function render() {
  return _c('div', { attrs: { "id": "app" } }, [_v(_s(message))]);
}

组件化机制

Vue 的组件是基于原型继承实现的。每个组件都是一个 Vue 实例，拥有独立的生命周期和数据作用域。组件间的通信通过 props（父传子）和 emit（子传父）实现。

组件注册示例：

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

生命周期管理

Vue 组件从创建到销毁会经历一系列生命周期钩子，框架在特定阶段调用这些钩子函数。核心生命周期包括：

beforeCreate：实例初始化后，数据观测之前。
created：实例创建完成，数据观测已配置。
mounted：DOM 挂载完成。
updated：数据变化导致 DOM 重新渲染后。
destroyed：实例销毁后。

依赖收集与派发更新

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

每个响应式属性有一个 Dep 实例，用于存储所有依赖它的 Watcher。
当属性被访问时，当前 Watcher 会被添加到 Dep 中（依赖收集）。
当属性变化时，Dep 会通知所有 Watcher 更新（派发更新）。

代码结构示意：

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