当前位置：首页 > VUE

vue的实现

2026-01-07 18:44:44VUE

Vue 的实现原理

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

响应式系统

Vue 的响应式系统基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现。通过劫持数据的访问和修改，实现数据变化时自动更新视图。

Vue 2 的响应式实现：
- 使用 Object.defineProperty 递归遍历对象的属性，将其转换为 getter/setter。
- 每个属性关联一个 Dep 实例，用于收集依赖（Watcher）。
- 当数据被访问时，触发 getter，将当前 Watcher 添加到 Dep 中。
- 当数据被修改时，触发 setter，通知 Dep 中的所有 Watcher 更新。

// 简化版响应式实现
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    },
  });
}

Vue 3 的响应式实现：
- 使用 Proxy 代理整个对象，无需递归遍历属性。
- 通过 Reflect 操作对象属性，实现更细粒度的依赖收集和触发。

function reactive(obj) {
  return new Proxy(obj, {
    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 减少直接操作真实 DOM 的开销。当数据变化时，生成新的虚拟 DOM，与旧的虚拟 DOM 进行对比（Diff 算法），找出最小更新路径。

虚拟 DOM 结构：
- 虚拟 DOM 是一个轻量级的 JavaScript 对象，描述真实 DOM 的层次结构。

const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'span', props: { class: 'text' }, children: 'Hello Vue' },
  ],
};

Diff 算法：
- 同级比较，避免跨层级对比。
- 通过 key 标识节点，优化列表更新的效率。
- 双端比较（Vue 3 优化），减少不必要的 DOM 操作。

模板编译

Vue 的模板会被编译为渲染函数（render function），生成虚拟 DOM。编译过程分为以下步骤：

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

// 模板
<template>
  <div id="app">{{ message }}</div>
</template>

// 编译后的渲染函数
function render() {
  return _c('div', { attrs: { id: 'app' } }, [_v(_s(message))]);
}