当前位置：首页 > VUE

vue底层原理实现

2026-02-17 03:54:31VUE

Vue 底层原理实现

Vue.js 的核心原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是 Vue 底层实现的关键技术点：

响应式系统

Vue 的响应式系统基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。通过劫持数据的读写操作，Vue 能够在数据变化时自动触发视图更新。

Vue 2 实现：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log('set', key);
        val = newVal;
      }
    }
  });
}

Vue 3 实现：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log('get', key);
      return target[key];
    },
    set(target, key, value) {
      console.log('set', key);
      target[key] = value;
      return true;
    }
  });
}

虚拟 DOM

Vue 通过虚拟 DOM 优化渲染性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，描述真实 DOM 的结构。当数据变化时，Vue 会生成新的虚拟 DOM，并通过 Diff 算法比较新旧虚拟 DOM 的差异，最终只更新需要修改的真实 DOM。

vue底层原理实现

虚拟 DOM 示例：

const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'span', children: 'Hello Vue' }
  ]
};

模板编译

Vue 的模板会通过编译器转换为渲染函数。渲染函数返回虚拟 DOM，最终由虚拟 DOM 生成真实 DOM。

模板编译流程：
1. 模板解析为 AST（抽象语法树）。
2. AST 优化（静态节点标记）。
3. AST 转换为渲染函数代码。

渲染函数示例：

vue底层原理实现

function render() {
  return h('div', { id: 'app' }, [
    h('span', null, 'Hello Vue')
  ]);
}

组件化机制

Vue 的组件是一个独立的模块，包含模板、逻辑和样式。组件通过 Vue.component 注册，并在模板中以自定义标签的形式使用。

组件定义：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

组件通信：
- 父子组件通过 props 和 $emit 通信。
- 跨组件通信通过 $bus 或 Vuex 实现。

生命周期钩子

Vue 组件从创建到销毁会经历一系列生命周期阶段，每个阶段提供对应的钩子函数供开发者介入。

主要生命周期钩子：
- beforeCreate：实例初始化后，数据观测之前。
- created：实例创建完成，数据观测已配置。
- beforeMount：模板编译完成，尚未挂载到 DOM。
- mounted：实例挂载到 DOM。
- beforeUpdate：数据变化，DOM 更新前。
- updated：DOM 更新完成。
- beforeDestroy：实例销毁前。
- destroyed：实例销毁完成。