当前位置：首页 > VUE

vue底层如何实现

2026-02-25 18:16:55VUE

Vue 底层实现原理

Vue.js 的底层实现主要依赖于响应式系统、虚拟 DOM 和模板编译等核心机制。以下是其关键实现原理的详细解析：

响应式系统

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;
      }
    }
  });
}

通过为对象的每个属性设置 getter 和 setter，实现对数据变化的监听。

Vue 3 的实现：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`get ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`set ${key}: ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
};

使用 Proxy 可以监听整个对象，无需递归遍历属性，性能更优。

虚拟 DOM

Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法对比新旧树的差异，最终仅更新实际变化的 DOM 节点。

虚拟 DOM 结构示例：

vue底层如何实现

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

Diff 算法：采用同层比较策略，通过双指针遍历新旧节点，高效识别节点变化。

模板编译

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

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

编译示例：

<div id="app">{{ message }}</div>

编译后的渲染函数：

function render() {
  return _c('div', { attrs: { id: 'app' } }, [_v(_s(message))]);
}

组件化

Vue 组件是基于原型继承的构造函数。每个组件实例拥有独立的作用域，通过 $parent 和 $children 维护父子关系。

vue底层如何实现

组件初始化：

const SubComponent = {
  template: '<div>Sub Component</div>'
};
const vm = new Vue({
  components: { SubComponent },
  template: '<sub-component></sub-component>'
});

依赖收集与派发更新

Vue 通过 Watcher 和 Dep 实现依赖收集与更新派发：

Dep：依赖管理器，每个响应式属性对应一个 Dep 实例。
Watcher：订阅者，负责执行更新操作。

核心逻辑：

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

class Watcher {
  update() {
    // 执行更新（如重新渲染）
  }
}

生命周期管理

Vue 实例的生命周期通过调用特定的钩子函数实现。从初始化、挂载到销毁，每个阶段触发对应的生命周期钩子。

钩子调用顺序：

initEvents();
callHook(vm, 'beforeCreate');
initState();
callHook(vm, 'created');
mountComponent();
callHook(vm, 'beforeMount');
// 渲染并挂载
callHook(vm, 'mounted');