当前位置：首页 > VUE

自己实现vue双括号

2026-02-24 04:08:01VUE

实现 Vue 双括号插值的基本原理

Vue 的双括号插值（{{}}）是一种数据绑定的语法，核心是通过解析模板中的双括号内容，将其替换为对应数据对象的属性值，并实现数据变化时的自动更新。

核心步骤

数据劫持与响应式 通过 Object.defineProperty 或 Proxy 监听数据对象属性的变化。当数据被访问或修改时，触发相应的 getter/setter。

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

依赖收集与发布订阅 定义一个 Dep 类管理依赖（Watcher），并在数据变化时通知所有订阅者更新。

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

模板编译 解析 HTML 模板，提取双括号中的表达式，并创建对应的 Watcher 实例。

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

function replace(node, vm) {
  const reg = /\{\{(.*?)\}\}/g;
  if (node.nodeType === 3) {
    const text = node.textContent;
    if (reg.test(text)) {
      const exp = RegExp.$1.trim();
      node.textContent = text.replace(reg, vm[exp]);
      new Watcher(vm, exp, val => {
        node.textContent = text.replace(reg, val);
      });
    }
  }
  if (node.nodeType === 1) {
    Array.from(node.childNodes).forEach(child => replace(child, vm));
  }
}

Watcher 实现 Watcher 作为观察者，在初始化时触发 getter 收集依赖，并在数据更新时执行回调。

自己实现vue双括号

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    Dep.target = this;
    this.value = vm[exp]; // 触发 getter
    Dep.target = null;
  }
  update() {
    const newVal = this.vm[this.exp];
    if (newVal !== this.value) {
      this.value = newVal;
      this.cb(newVal);
    }
  }
}

完整示例

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

function proxy(vm, sourceKey) {
  Object.keys(vm[sourceKey]).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        return vm[sourceKey][key];
      },
      set(newVal) {
        vm[sourceKey][key] = newVal;
      }
    });
  });
}

// 使用示例
const vm = new MiniVue({
  el: '#app',
  data: { message: 'Hello Vue!' }
});