当前位置：首页 > VUE

js 实现vue

2026-03-27 22:21:33VUE

实现 Vue 的核心功能

Vue.js 的核心功能包括数据绑定、虚拟 DOM、组件系统和响应式系统。以下是使用原生 JavaScript 实现类似 Vue 的核心功能的方法。

响应式数据绑定

Vue 的核心之一是响应式数据绑定。通过 Object.defineProperty 或 Proxy 监听数据变化并触发更新。

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

Dep.target = null;

虚拟 DOM 和 Diff 算法

虚拟 DOM 是 Vue 高效渲染的关键。以下是一个简单的虚拟 DOM 实现。

function createElement(tag, props, children) {
  return { tag, props, children };
}

function render(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    for (const key in vnode.props) {
      el.setAttribute(key, vnode.props[key]);
    }
  }

  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(render(child));
    });
  }

  return el;
}

function patch(oldNode, newNode) {
  if (oldNode.tag !== newNode.tag) {
    return newNode;
  }

  const el = oldNode.el;
  const oldChildren = oldNode.children || [];
  const newChildren = newNode.children || [];

  for (let i = 0; i < newChildren.length; i++) {
    if (!oldChildren[i]) {
      el.appendChild(render(newChildren[i]));
    } else {
      patch(oldChildren[i], newChildren[i]);
    }
  }

  return el;
}

组件系统

Vue 的组件系统允许将 UI 拆分为独立的可复用模块。以下是简单的组件实现。

class Component {
  constructor(options) {
    this.data = options.data();
    this.template = options.template;

    Object.keys(this.data).forEach(key => {
      defineReactive(this.data, key);
    });

    this.$el = null;
    this.vnode = null;
  }

  mount(el) {
    this.$el = document.querySelector(el);
    this.update();
  }

  update() {
    const newVNode = this.render();
    if (this.vnode) {
      patch(this.vnode, newVNode);
    } else {
      this.$el.appendChild(render(newVNode));
    }
    this.vnode = newVNode;
  }

  render() {
    return createElement('div', {}, [this.template(this.data)]);
  }
}

使用示例

以下是一个简单的 Vue 实现示例。

js 实现vue

const app = new Component({
  data() {
    return { message: 'Hello, Vue!' };
  },
  template(data) {
    return data.message;
  }
});

app.mount('#app');