当前位置：首页 > VUE

vue.js底层实现

2026-02-24 09:22:07VUE

Vue.js 的底层实现

Vue.js 的底层实现涉及多个核心机制，包括响应式系统、虚拟 DOM、模板编译和组件化等。以下是对其底层实现的关键技术点的详细解析。

响应式系统

Vue.js 的响应式系统是其核心特性之一，通过数据劫持和依赖收集实现数据的自动更新。当数据发生变化时，视图会自动更新。

数据劫持：Vue.js 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来劫持数据的访问和修改。当数据被读取时，会触发 getter 进行依赖收集；当数据被修改时，会触发 setter 通知依赖更新。
依赖收集：每个响应式数据属性都有一个对应的 Dep 实例，用于存储依赖（即 Watcher 实例）。当数据被访问时，当前 Watcher 会被添加到 Dep 中；当数据被修改时，Dep 会通知所有 Watcher 执行更新。

虚拟 DOM

Vue.js 使用虚拟 DOM 来提高渲染效率。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示真实 DOM 的抽象。

虚拟 DOM 的生成：Vue.js 将模板编译为渲染函数，渲染函数执行后生成虚拟 DOM 树。
Diff 算法：当数据变化时，Vue.js 会生成新的虚拟 DOM 树，并通过 Diff 算法比较新旧虚拟 DOM 树的差异，最终只更新发生变化的部分到真实 DOM。

模板编译

Vue.js 的模板编译是将模板字符串转换为渲染函数的过程。

解析：将模板字符串解析为抽象语法树（AST）。
优化：对 AST 进行静态节点标记，跳过静态节点的 Diff 比较。
代码生成：将优化后的 AST 转换为渲染函数的代码字符串。

组件化

Vue.js 的组件化是通过 Vue.component 或单文件组件（.vue 文件）实现的。

组件实例化：每个组件都是一个 Vue 实例，拥有独立的响应式系统、虚拟 DOM 和生命周期钩子。
父子组件通信：通过 props 和 $emit 实现父子组件之间的数据传递和事件通信。

生命周期钩子

Vue.js 的生命周期钩子允许开发者在组件的不同阶段执行自定义逻辑。

创建阶段：beforeCreate、created、beforeMount、mounted。
更新阶段：beforeUpdate、updated。
销毁阶段：beforeDestroy、destroyed。

示例代码

以下是一个简单的 Vue.js 响应式数据劫持的示例代码：

vue.js底层实现

// Vue 2.x 使用 Object.defineProperty
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();
    }
  });
}

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

class Watcher {
  update() {
    console.log('数据更新了');
  }
}