当前位置：首页 > VUE

vue原理实现

2026-03-07 05:11:04VUE

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}:${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`set ${key}:${newVal}`);
        val = newVal;
      }
    }
  });
}

Vue 3.x 改用 Proxy 实现，解决了数组和新增属性的监听问题：

vue原理实现

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 树。当数据变化时，通过 Diff 算法比较新旧虚拟 DOM，计算出最小更新量。

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

模板编译

Vue 的模板编译器将 HTML 模板转换为渲染函数：

vue原理实现

解析器：将模板字符串转换为 AST（抽象语法树）
优化器：标记静态节点用于后续优化
代码生成器：将 AST 转换为可执行的渲染函数代码

// 示例编译结果
with(this){
  return _c('div', {attrs:{"id":"app"}}, [
    _c('p', [_v(_s(message))])
  ])
}

组件系统

Vue 组件本质上是带有预设选项的 Vue 实例。组件初始化过程包括：

合并选项（mixins/extends）
初始化生命周期
初始化事件系统
调用 beforeCreate 钩子
初始化注入（provide/inject）
初始化状态（props/data/computed等）
调用 created 钩子

实现简易 Vue 示例

以下是一个极简版的 Vue 实现框架：

class Vue {
  constructor(options) {
    this.$options = options;
    this.$data = options.data;

    observe(this.$data);
    proxy(this, '$data');

    new Compile(options.el, this);
  }
}

function observe(obj) {
  if (typeof obj !== 'object' || obj == null) return;

  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}