原生实现vue功能

原生 JavaScript 实现 Vue 核心功能

使用原生 JavaScript 实现 Vue 的核心功能（如数据绑定、响应式更新、虚拟 DOM 等）需要理解其底层原理。以下是关键功能的实现思路：

数据响应式系统

通过 Object.defineProperty 或 Proxy 实现数据劫持：

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());
  }
}
Dep.target = null; // 静态属性指向当前Watcher

虚拟 DOM 与 Diff 算法

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

function patch(oldNode, newNode) {
  if (oldNode.tag === newNode.tag) {
    const el = oldNode.el;
    newNode.el = el;
    // 属性更新
    const oldProps = oldNode.props || {};
    const newProps = newNode.props || {};
    for (const key in newProps) {
      if (newProps[key] !== oldProps[key]) {
        el.setAttribute(key, newProps[key]);
      }
    }
    // 子节点Diff
    const oldChildren = oldNode.children || [];
    const newChildren = newNode.children || [];
    // ...实现key-based diff算法
  } else {
    // 节点替换
    const newEl = document.createElement(newNode.tag);
    // ...处理props和children
    oldNode.el.parentNode.replaceChild(newEl, oldNode.el);
  }
}

模板编译

function compile(template) {
  const ast = parse(template); // 生成AST
  optimize(ast); // 静态节点标记
  return generate(ast); // 生成渲染函数
}

function parse(template) {
  // 实现简单的HTML解析器
  const stack = [];
  let root;
  let currentParent;
  // ...解析过程
  return root;
}

实现双向绑定

<input id="input" type="text">
<div id="display"></div>

<script>
  const data = { text: '' };
  observe(data);

  new Watcher(data, 'text', (value) => {
    document.getElementById('display').textContent = value;
  });

  document.getElementById('input').addEventListener('input', (e) => {
    data.text = e.target.value;
  });
</script>

组件系统模拟

class Component {
  constructor(options) {
    this.$options = options;
    this._data = options.data();
    observe(this._data);
    this._el = document.querySelector(options.el);
    this.compile();
  }

  compile() {
    const render = this.$options.render;
    this.update(render());
  }

  update(vnode) {
    const patches = diff(this._vnode, vnode);
    applyPatches(this._el, patches);
    this._vnode = vnode;
  }
}

以上代码展示了如何用原生 JavaScript 实现 Vue 的核心机制。实际实现需要考虑更多边界条件和性能优化，但核心原理围绕响应式数据、虚拟 DOM 和组件化展开。