当前位置：首页 > VUE

vue远离实现

2026-01-08 02:03:04VUE

Vue 原理实现

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

响应式系统

Vue 的响应式系统基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现。通过劫持数据的访问和修改，触发依赖收集和更新。

// Vue 2 响应式简化实现
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 触发更新
    }
  });
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 减少直接操作真实 DOM 的开销。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法比较新旧树的差异，最小化 DOM 操作。

// 虚拟 DOM 简化结构
const vnode = {
  tag: 'div',
  props: { className: 'container' },
  children: [
    { tag: 'span', text: 'Hello' }
  ]
};

模板编译

Vue 模板通过编译器转换为渲染函数。编译过程包括解析、优化和代码生成三个阶段，最终生成可执行的 JavaScript 代码。

// 模板示例
<template>
  <div>{{ message }}</div>
</template>

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

组件化机制

Vue 组件是独立的模块，每个组件实例拥有自己的作用域。组件通过 Vue.extend 或 options 对象定义，支持生命周期钩子和状态管理。

// 组件定义
const MyComponent = {
  data() {
    return { count: 0 };
  },
  template: '<button @click="count++">{{ count }}</button>'
};

实现一个简易 Vue

以下是一个极简的 Vue 实现，展示核心功能：

class MiniVue {
  constructor(options) {
    this.$options = options;
    this.$data = options.data;
    this.observe(this.$data);
    this.compile(options.el);
  }

  observe(data) {
    Object.keys(data).forEach(key => {
      let value = data[key];
      const dep = new Dep();
      Object.defineProperty(data, key, {
        get() {
          Dep.target && dep.addSub(Dep.target);
          return value;
        },
        set(newVal) {
          if (newVal !== value) {
            value = newVal;
            dep.notify();
          }
        }
      });
    });
  }

  compile(el) {
    const element = document.querySelector(el);
    this.compileNode(element);
  }

  compileNode(node) {
    node.childNodes.forEach(node => {
      if (node.nodeType === 1) {
        this.compileNode(node);
      } else if (node.nodeType === 3) {
        const reg = /\{\{\s*(\w+)\s*\}\}/g;
        const textContent = node.textContent;
        if (reg.test(textContent)) {
          const key = RegExp.$1;
          new Watcher(this.$data, key, (newVal) => {
            node.textContent = textContent.replace(reg, newVal);
          });
        }
      }
    });
  }
}

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

class Watcher {
  constructor(data, key, cb) {
    Dep.target = this;
    this.cb = cb;
    data[key]; // 触发 getter 收集依赖
    Dep.target = null;
  }
  update() {
    this.cb(this.value);
  }
}