当前位置：首页 > VUE

原生实现vue功能

2026-01-14 02:48:48VUE

原生 JavaScript 实现 Vue 核心功能

使用原生 JavaScript 模拟 Vue 的核心功能（如数据绑定、虚拟 DOM、响应式更新等），可以通过以下方式实现：

数据响应式系统

通过 Object.defineProperty 或 Proxy 监听数据变化，触发更新：

原生实现vue功能

function observe(data) {
  if (!data || typeof data !== 'object') return;
  Object.keys(data).forEach(key => {
    let value = data[key];
    const dep = new Dep(); // 依赖收集器
    observe(value); // 递归监听
    Object.defineProperty(data, key, {
      get() {
        Dep.target && dep.addSub(Dep.target); // 收集依赖
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        value = newVal;
        observe(newVal); // 新值也需要监听
        dep.notify(); // 触发更新
      }
    });
  });
}

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

模板编译与虚拟 DOM

实现简单的模板解析和虚拟 DOM 生成：

原生实现vue功能

function compile(template, data) {
  const el = document.querySelector(template);
  const fragment = document.createDocumentFragment();
  let child;
  while (child = el.firstChild) {
    fragment.appendChild(child);
  }
  replace(fragment, data);
  el.appendChild(fragment);
}

function replace(node, data) {
  const reg = /\{\{(.*?)\}\}/g;
  if (node.nodeType === 3) { // 文本节点
    const text = node.textContent;
    if (reg.test(text)) {
      const key = RegExp.$1.trim();
      node.textContent = text.replace(reg, data[key]);
      new Watcher(data, key, (val) => {
        node.textContent = text.replace(reg, val);
      });
    }
    return;
  }
  if (node.nodeType === 1) { // 元素节点
    const attrs = node.attributes;
    for (let i = 0; i < attrs.length; i++) {
      const name = attrs[i].name;
      if (name.startsWith('v-')) {
        const exp = attrs[i].value;
        node.value = data[exp];
        new Watcher(data, exp, (val) => {
          node.value = val;
        });
        node.addEventListener('input', (e) => {
          data[exp] = e.target.value;
        });
      }
    }
  }
  Array.from(node.childNodes).forEach(child => replace(child, data));
}

观察者与依赖管理

实现 Watcher 类连接响应式数据和视图：

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

简易调用示例

整合以上功能实现类似 Vue 的调用方式：

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

// 使用示例
new MiniVue({
  el: '#app',
  data() {
    return { message: 'Hello MiniVue', count: 0 };
  }
});