当前位置：首页 > VUE

vue原理与实现

2026-03-08 23:45:30VUE

Vue.js 的核心原理与实现

Vue.js 是一个渐进式 JavaScript 框架，其核心原理主要包括响应式系统、虚拟 DOM、模板编译和组件化。以下是其关键实现细节：

响应式系统

Vue 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据被访问或修改时，依赖收集和派发更新机制会触发视图的重新渲染。

// Vue 2 响应式简化实现
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      console.log(`设置 ${key}`);
      val = newVal;
    }
  });
}

虚拟 DOM

Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 树，与旧树进行对比（Diff 算法），计算出最小更新操作后应用到真实 DOM。

// 虚拟 DOM 简化结构
const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'span', children: 'Hello' }
  ]
};

模板编译

Vue 模板会被编译为渲染函数。编译过程包括解析（生成 AST）、优化（静态节点标记）和代码生成（生成渲染函数）。

// 模板编译示例
<template>
  <div>{{ message }}</div>
</template>

// 编译为渲染函数
function render() {
  return _c('div', [_v(_s(message))]);
}

组件化

Vue 组件是独立可复用的模块。每个组件实例都有自己的作用域，通过 props 接收父组件数据，通过 emit 触发父组件事件。

// 组件定义
Vue.component('my-component', {
  props: ['title'],
  template: '<div>{{ title }}</div>'
});

Vue 3 的主要改进

Vue 3 在性能、开发体验和扩展性方面有显著提升：

响应式系统：使用 Proxy 替代 Object.defineProperty，支持数组索引和 Map/Set 的响应式。
组合式 API：通过 setup 函数提供更灵活的代码组织方式。
性能优化：编译时优化如静态提升、补丁标志等减少运行时开销。

// Vue 3 组合式 API 示例
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count };
  }
};

实现简易 Vue

以下是一个极简的 Vue 实现框架：

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

  observe(data) {
    Object.keys(data).forEach(key => {
      let value = data[key];
      const dep = new Dep();
      Object.defineProperty(data, key, {
        get() {
          Dep.target && dep.addSub(Dep.target);
          return value;
        },
        set(newVal) {
          value = newVal;
          dep.notify();
        }
      });
    });
  }

  compile(el) {
    const element = document.querySelector(el);
    this.compileNode(element);
  }

  compileNode(node) {
    if (node.nodeType === 3) { // 文本节点
      const reg = /\{\{(.*?)\}\}/g;
      const textContent = node.textContent;
      if (reg.test(textContent)) {
        const key = RegExp.$1.trim();
        new Watcher(this._data, key, (val) => {
          node.textContent = textContent.replace(reg, val);
        });
      }
    }
    // 处理元素节点和属性...
  }
}

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

class Watcher {
  constructor(data, key, cb) {
    Dep.target = this;
    this.cb = cb;
    data[key]; // 触发 getter 收集依赖
    Dep.target = null;
  }
  update() {
    this.cb();
  }
}