当前位置：首页 > VUE

js 实现vue

2026-01-13 05:08:26VUE

Vue.js 的基本实现

在 JavaScript 中实现 Vue.js 的核心功能，可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。

数据响应式系统

通过 Object.defineProperty 或 Proxy 实现数据的响应式监听。以下是一个使用 Proxy 的简单实现：

class Observer {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(data) {
    if (!data || typeof data !== 'object') return;
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
    });
  }

  defineReactive(obj, key, val) {
    this.walk(val); // 递归监听嵌套对象
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        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;

实现 Watcher

Watcher 用于监听数据变化并触发更新：

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this;
    const value = this.vm.data[this.exp]; // 触发 getter
    Dep.target = null;
    return value;
  }

  update() {
    const newValue = this.vm.data[this.exp];
    if (newValue !== this.value) {
      this.value = newValue;
      this.cb(newValue);
    }
  }
}

实现 Compiler

Compiler 用于解析模板并绑定数据：

class Compiler {
  constructor(el, vm) {
    this.vm = vm;
    this.el = document.querySelector(el);
    this.compile(this.el);
  }

  compile(node) {
    Array.from(node.childNodes).forEach(child => {
      if (this.isElementNode(child)) {
        this.compileElement(child);
      } else if (this.isTextNode(child)) {
        this.compileText(child);
      }
      if (child.childNodes && child.childNodes.length) {
        this.compile(child);
      }
    });
  }

  isElementNode(node) {
    return node.nodeType === 1;
  }

  isTextNode(node) {
    return node.nodeType === 3;
  }

  compileElement(node) {
    Array.from(node.attributes).forEach(attr => {
      if (attr.name.startsWith('v-')) {
        const dir = attr.name.substring(2);
        const exp = attr.value;
        this[`${dir}Updater`]?.(node, exp);
      }
    });
  }

  compileText(node) {
    const reg = /\{\{(.+?)\}\}/;
    if (reg.test(node.textContent)) {
      const exp = RegExp.$1.trim();
      this.textUpdater(node, exp);
    }
  }

  textUpdater(node, exp) {
    node.textContent = this.vm.data[exp];
    new Watcher(this.vm, exp, value => {
      node.textContent = value;
    });
  }

  modelUpdater(node, exp) {
    node.value = this.vm.data[exp];
    node.addEventListener('input', e => {
      this.vm.data[exp] = e.target.value;
    });
    new Watcher(this.vm, exp, value => {
      node.value = value;
    });
  }
}

实现 Vue 类

整合以上功能实现一个简单的 Vue 类：

class Vue {
  constructor(options) {
    this.$options = options;
    this.data = options.data;
    new Observer(this.data);
    new Compiler(options.el, this);
    this.proxyData();
  }

  proxyData() {
    Object.keys(this.data).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return this.data[key];
        },
        set(newVal) {
          this.data[key] = newVal;
        }
      });
    });
  }
}

使用示例

以下是如何使用这个简化版的 Vue：

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>