当前位置：首页 > VUE

实现简单的vue框架

2026-02-25 07:12:05VUE

实现简单的 Vue 框架

核心原理

Vue 的核心是数据劫持（响应式系统）和虚拟 DOM。通过 Object.defineProperty 或 Proxy 监听数据变化，结合虚拟 DOM 实现高效更新。

数据劫持实现

使用 Object.defineProperty 监听对象属性的读取和修改：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`设置 ${key}: ${newVal}`);
        val = newVal;
        // 触发更新
      }
    }
  });
}

虚拟 DOM 简化实现

虚拟 DOM 是一个描述真实 DOM 的 JavaScript 对象：

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

渲染函数

将虚拟 DOM 转换为真实 DOM：

function render(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  const el = document.createElement(vnode.tag);
  for (const key in vnode.props) {
    el.setAttribute(key, vnode.props[key]);
  }
  vnode.children.forEach(child => {
    el.appendChild(render(child));
  });
  return el;
}

简易组件系统

定义组件构造函数和挂载方法：

function Vue(options) {
  this.$options = options;
  this._data = options.data();
  this._el = document.querySelector(options.el);
  this._compile();
}

Vue.prototype._compile = function() {
  const html = this.$options.template;
  const el = document.createElement('div');
  el.innerHTML = html;
  this._el.appendChild(el);
};

使用示例

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

响应式系统扩展

结合数据劫持和依赖收集：

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target);
    }
  }
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}
let target = null;

function watchEffect(cb) {
  target = cb;
  cb();
  target = null;
}

模板编译

简单模板插值处理：

Vue.prototype._compile = function() {
  const html = this.$options.template;
  const el = document.createElement('div');
  el.innerHTML = html.replace(/\{\{\s*(.*?)\s*\}\}/g, (_, exp) => {
    return this._data[exp.trim()];
  });
  this._el.appendChild(el);
};

这个实现包含了 Vue 的核心概念：数据响应式、虚拟 DOM、组件系统和模板编译。实际 Vue 的实现更为复杂，包含更多优化和功能。

实现简单的vue框架