vue底层原理实现

Vue 底层原理实现

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

响应式系统

Vue 2.x 使用 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) {
        console.log('set', key);
        val = newVal;
      }
    }
  });
}

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

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

依赖收集与派发更新

• Watcher：每个组件实例对应一个渲染 Watcher，在 getter 中收集依赖。
• Dep：每个响应式属性关联一个 Dep 实例，用于管理依赖的 Watcher。
• 更新流程：数据变更 → 触发 setter → 通知 Dep → 调用 Watcher 的 update 方法 → 触发重新渲染。

虚拟 DOM 与 Diff 算法

Vue 将模板编译为渲染函数，生成虚拟 DOM 树（VNode），通过 Diff 算法比对新旧 VNode 并高效更新真实 DOM。

Diff 优化策略：

• 同层比较，不跨层级。
• 双端对比：通过头尾指针快速处理相同节点。
• Key 优化：复用相同 Key 的节点。

function patch(oldVnode, newVnode) {
  if (sameVnode(oldVnode, newVnode)) {
    patchVnode(oldVnode, newVnode);
  } else {
    replaceNode(oldVnode, newVnode);
  }
}

模板编译

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

// 模板
<div>{{ message }}</div>

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

组件化机制

• 组件实例化：通过 Vue.extend 创建子类构造函数。
• 生命周期管理：在特定阶段调用 created、mounted 等钩子。
• 父子通信：props 向下传递，$emit 向上触发事件。

Vue 3 的优化

1. 响应式升级：Proxy 替代 Object.defineProperty。
2. Composition API：逻辑复用更灵活。
3. Tree-shaking：按需引入代码。
4. 性能提升：编译时优化（如 Block Tree）、更高效的 Diff 算法。

关键源码模块

• 响应式：core/observer/
• 虚拟 DOM：core/vdom/
• 编译器：compiler/
• 运行时：core/instance/

通过理解这些核心机制，可以更高效地使用 Vue 并解决复杂场景问题。