Vue3源码深度解析（一）：响应式系统原理与实现

原创 已于 2025-11-21 14:42:05 修改 · 901 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #知与 #vue3 #vue3源码

于 2025-11-21 14:41:24 首次发布

Vue3源码深度解析（一）：响应式系统原理与实现

前言

2020年9月18日，Vue.js发布版3.0版本，代号：One Piece，Vue3作为Vue.js框架的重大版本升级，在性能、可维护性和开发体验上都有了质的飞跃。本系列文章将深入剖析Vue3的核心源码，帮助大家从底层理解Vue3的设计思想和实现原理。

本文是系列的第一篇，重点讲解Vue3响应式系统的核心原理。

一、Vue3响应式系统概述

1.1 Vue2 vs Vue3响应式对比

Vue2的响应式实现：

  • 基于Object.defineProperty实现
  • 需要递归遍历所有属性进行劫持
  • 无法监听对象属性的新增和删除
  • 无法直接监听数组索引和length的变化

Vue3的响应式实现：

  • 基于ES6的Proxy实现
  • 可以监听对象属性的新增和删除
  • 可以直接监听数组的变化
  • 性能更优，不需要递归遍历所有属性
  • 支持Map、Set、WeakMap、WeakSet等数据结构

1.2 响应式系统的核心概念

在深入源码前，我们需要理解几个核心概念：

  • Proxy：代理对象，用于拦截对象的读写操作
  • Reflect：配合Proxy使用，提供对象操作的默认行为
  • Track（依赖收集）：在getter中收集依赖
  • Trigger（触发更新）：在setter中触发依赖更新
  • Effect：副作用函数，响应式数据变化时需要执行的函数
  • ReactiveEffect：副作用类，用于管理依赖关系

二、Proxy与Reflect基础

2.1 Proxy基本用法

在分析Vue3源码前，先来回顾Proxy的基本用法：

const obj = { name: 'Vue3', version: 3 };

const proxy = new Proxy(obj, {
  // 拦截读取操作
  get(target, key, receiver) {
    console.log(`读取了${key}属性`);
    return Reflect.get(target, key, receiver);
  },
  
  // 拦截设置操作
  set(target, key, value, receiver) {
    console.log(`设置${key}属性为${value}`);
    return Reflect.set(target, key, value, receiver);
  },
  
  // 拦截属性删除
  deleteProperty(target, key) {
    console.log(`删除了${key}属性`);
    return Reflect.deleteProperty(target, key);
  },
  
  // 拦截in操作符
  has(target, key) {
    console.log(`检查${key}属性是否存在`);
    return Reflect.has(target, key);
  }
});

proxy.name; // 输出：读取了name属性
proxy.count = 10; // 输出：设置count属性为10

2.2 为什么使用Reflect

Reflect的作用主要有三点：

  1. 保证正确的this指向：通过receiver参数确保this指向代理对象
  2. 统一操作接口：提供统一的对象操作方法
  3. 返回操作结果：返回布尔值表示操作是否成功
const obj = {
  _value: 1,
  get value() {
    return this._value;
  }
};

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    // 使用Reflect确保this指向proxy而不是obj
    return Reflect.get(target, key, receiver);
  }
});

三、响应式核心：reactive源码解析

3.1 reactive的基本实现

Vue3中的reactive函数用于将对象转换为响应式对象。让我们看看简化版的实现：

// 存储原始对象与代理对象的映射关系
const reactiveMap = new WeakMap();

function reactive(target) {
  // 如果不是对象，直接返回
  if (typeof target !== 'object' || target === null) {
    return target;
  }
  
  // 如果已经是响应式对象，直接返回
  if (reactiveMap.has(target)) {
    return reactiveMap.get(target);
  }
  
  // 创建代理对象
  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      
      const result = Reflect.get(target, key, receiver);
      
      // 如果属性值是对象，递归转换为响应式
      if (typeof result === 'object' && result !== null) {
        return reactive(result);
      }
      
      return result;
    },
    
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      
      // 值发生变化时触发更新
      if (oldValue !== value) {
        trigger(target, key);
      }
      
      return result;
    },
    
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key);
      const result = Reflect.deleteProperty(target, key);
      
      if (hadKey && result) {
        trigger(target, key);
      }
      
      return result;
    }
  });
  
  // 缓存代理对象
  reactiveMap.set(target, proxy);
  
  return proxy;
}

3.2 依赖收集：track函数

依赖收集是响应式系统的核心之一。Vue3使用了一个三层的数据结构来存储依赖关系：

// 存储依赖关系的数据结构
// WeakMap: target -> Map
// Map: key -> Set
// Set: effects
const targetMap = new WeakMap();

// 当前正在执行的副作用函数
let activeEffect = null;

function track(target, key) {
  // 如果没有activeEffect，说明不需要收集依赖
  if (!activeEffect) {
    return;
  }
  
  // 获取target对应的依赖Map
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  
  // 获取key对应的依赖Set
  let deps = depsMap.get(key);
  if (!deps) {
    depsMap.set(key, (deps = new Set()));
  }
  
  // 将当前副作用函数添加到依赖集合中
  deps.add(activeEffect);
  
  // 双向存储：副作用函数也要记录它被哪些属性依赖
  activeEffect.deps.push(deps);
}

依赖收集的数据结构示例：

targetMap = {
  target1: {
    key1: [effect1, effect2],
    key2: [effect1]
  },
  target2: {
    key3: [effect2]
  }
}

3.3 触发更新：trigger函数

当响应式数据发生变化时，需要触发所有相关的副作用函数：

function trigger(target, key) {
  // 获取target对应的依赖Map
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }
  
  // 获取key对应的所有副作用函数
  const effects = depsMap.get(key);
  if (!effects) {
    return;
  }
  
  // 创建新的Set来避免无限循环
  // 因为执行effect可能会再次触发依赖收集
  const effectsToRun = new Set(effects);
  
  effectsToRun.forEach(effect => {
    // 如果effect有调度器，使用调度器执行
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect();
    }
  });
}

3.4 副作用函数：effect实现

effect函数用于创建一个响应式的副作用函数：

function effect(fn, options = {}) {
  const _effect = function() {
    // 清除之前的依赖
    cleanup(_effect);
    
    // 设置当前活跃的effect
    activeEffect = _effect;
    
    // 执行副作用函数，期间会触发依赖收集
    const result = fn();
    
    // 重置activeEffect
    activeEffect = null;
    
    return result;
  };
  
  // 用于存储该effect依赖的所有属性
  _effect.deps = [];
  
  // 存储调度器
  _effect.scheduler = options.scheduler;
  
  // 如果不是lazy，立即执行
  if (!options.lazy) {
    _effect();
  }
  
  return _effect;
}

function cleanup(effect) {
  // 从所有依赖集合中移除该effect
  const { deps } = effect;
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect);
    }
    deps.length = 0;
  }
}

3.5 完整示例

让我们通过一个完整的示例来理解响应式系统的工作流程：

// 创建响应式对象
const state = reactive({
  count: 0,
  message: 'Hello'
});

// 创建副作用函数
effect(() => {
  console.log('count的值是：', state.count);
  console.log('message的值是：', state.message);
});
// 输出：count的值是：0
// 输出：message的值是：Hello

// 修改数据，自动触发副作用函数
state.count++;
// 输出：count的值是：1
// 输出：message的值是：Hello

state.message = 'World';
// 输出：count的值是：1
// 输出：message的值是：World

执行流程分析：

  1. reactive(obj)创建代理对象
  2. effect(fn)执行时，设置activeEffect = fn
  3. 访问state.count触发get，调用track(target, 'count')收集依赖
  4. 访问state.message触发get，调用track(target, 'message')收集依赖
  5. 修改state.count触发set，调用trigger(target, 'count')执行副作用函数
  6. 副作用函数重新执行，重新收集依赖

四、响应式进阶：处理边界情况

4.1 防止重复代理

// 已经是响应式对象的标记
const ReactiveFlags = {
  IS_REACTIVE: '__v_isReactive'
};

function reactive(target) {
  // 如果已经是响应式对象，直接返回
  if (target && target[ReactiveFlags.IS_REACTIVE]) {
    return target;
  }
  
  // ... 创建代理对象的代码
  
  // 在代理对象的get拦截中返回标记
  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      if (key === ReactiveFlags.IS_REACTIVE) {
        return true;
      }
      // ... 其他get逻辑
    }
  });
  
  return proxy;
}

4.2 处理数组

对于数组，Vue3做了特殊处理来优化性能：

const arrayInstrumentations = {};

['push', 'pop', 'shift', 'unshift', 'splice'].forEach(method => {
  arrayInstrumentations[method] = function(...args) {
    // 暂停依赖收集
    pauseTracking();
    
    // 执行原始方法
    const res = Array.prototype[method].apply(this, args);
    
    // 恢复依赖收集
    resetTracking();
    
    return res;
  };
});

// 在get拦截中使用
get(target, key, receiver) {
  if (Array.isArray(target) && arrayInstrumentations.hasOwnProperty(key)) {
    return Reflect.get(arrayInstrumentations, key, receiver);
  }
  // ... 其他逻辑
}

4.3 处理集合类型

对于Map、Set等集合类型，Vue3提供了专门的处理逻辑：

const mutableInstrumentations = {
  get(key) {
    const target = this.__v_raw;
    track(target, key);
    return target.get(key);
  },
  
  set(key, value) {
    const target = this.__v_raw;
    const hadKey = target.has(key);
    const result = target.set(key, value);
    
    if (!hadKey) {
      trigger(target, key, 'add');
    } else {
      trigger(target, key, 'set');
    }
    
    return result;
  }
};

五、性能优化技巧

5.1 使用WeakMap的优势

Vue3使用WeakMap存储依赖关系，有以下优势：

  1. 自动垃圾回收：当target对象没有被引用时，会自动从WeakMap中移除
  2. 避免内存泄漏：不会阻止target对象被垃圾回收
  3. 性能更好：不需要手动清理依赖关系

5.2 懒代理（Lazy Proxy）

Vue3对嵌套对象采用懒代理策略：

get(target, key, receiver) {
  const result = Reflect.get(target, key, receiver);
  
  // 只有在访问时才将嵌套对象转换为响应式
  if (typeof result === 'object' && result !== null) {
    return reactive(result);
  }
  
  return result;
}

这样做的好处是：

  • 减少初始化开销
  • 只代理实际访问的对象
  • 提高大型对象的性能

六、总结

本文深入剖析了Vue3响应式系统的核心原理：

  1. Proxy基础：理解Proxy和Reflect的工作机制
  2. reactive实现：如何创建响应式对象
  3. 依赖收集：track函数的三层数据结构设计
  4. 触发更新：trigger函数如何执行副作用函数
  5. effect函数：副作用函数的创建和执行机制
  6. 边界处理：数组、集合类型的特殊处理
  7. 性能优化：WeakMap和懒代理的使用

掌握这些核心原理后，就能深刻理解Vue3响应式系统的设计思想。在下一篇文章中，将继续探讨ref、computed等派生响应式API的实现原理。

相关资源

  • Vue3官方文档：https://cn.vuejs.org/
  • Vue3 GitHub仓库：https://github.com/vuejs/core
  • MDN Proxy文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
夏目1
关注
Vue 3源码深度解析之：`Vue`的`v-model`：它在不同组件和原生元素上的实现差异。
weixin_41455464的博客
08-23 264
这玩意儿，用起来简单，双向绑定，数据咻咻咻地就同步了，但你真要深究它背后的实现，尤其是它在不同组件和原生元素上的差异，嘿嘿，那可就有点意思了。这东西，它不是一个简单的语法糖。它会根据你绑定的对象，自动选择不同的实现方式。我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里边那个磨人的小妖精——是 Vue 中一个非常重要的特性，它极大地简化了开发过程。虽然我们不可能在这里把 Vue 3 的源码全部看完，但我们可以稍微深入一下，看看。的实现，我们需要稍微了解一下 Vue 的编译器。好了，今天的讲座就到这里。
Vue进阶之Vue3源码解析（一）
qq_34306228的博客
03-06 1995
所有的点文件夹都是或中的内容完整的编译的核心，packages/compiler-core 这三点是现在作为主流开发方式都是基于ts去做的 types是作为ts的入口 module是作为ECMAScript module(esModule)，正常通过 import xxx from xxx，引用的就是这个路径 main 默认引用这个包的时候，作为UMD的方式去引用 最后引用的路径 npm上@vue/compiler-core包这个就是在 package.json 中就算是，怎样去具体约束 exports导出
vue3源码详细分析
一步一个脚印，踏实努力，向着目标前进
06-10 6188
Vue 3是目前比较流行和使用的一种现代化JavaScript框架，其源码分析对于加深对前端框架的理解和开发能力有很大帮助。Vue 3源码主要由以下几个模块组成：Compiler模块：解析Vue模板，将其转换为渲染函数。Renderer模块：将组件渲染为真实的DOM元素。Reactivity模块：实现了响应式数据绑定。Runtime-core模块：实现了Vue组件的实例化、生命周期、事件等核心功能。Shared模块：包含了一些公共的工具函数。
vue3源码分析
cq1453001422的博客
07-19 8240
vue
小满vue3笔记（含源码解读）
ceike的博客
06-25 4183
。。AST语法数:这个东西在ES6转ES5的插件babel；ts转js中会进行ast转换根据满哥说的，我的理解是vue3在用js去描述DOM对象；这个描述和操作不一样（js操作dom）正在上传…重新上传取消为什么不直接操作dom：原因：dom的属性太多，影响性能我看是说这一次描述dom，会全部描述进去，影响性能。
Vue3源码 学习
qq_42544091的博客
10-11 3648
学习vue源码
Vue3核心源码解析第一课 看懂Vue3的优化
fegus的博客
07-12 2972
我现任 Zoom 前端架构师，曾先后于百度、滴滴从事前端研发工作。我平时喜欢钻研新技术、新框架，关注前端自动化、工程化、前端架构。和很多常年打磨自身编程能力的开发者一样，我对代码有洁癖，一直在努力追求高质量的代码。前端技术日新月异的今天，前端应用的复杂度也在日益提升，熟练掌握一门 MVVM 前端开发框架已经成为必然要求，因为它能够很大程度上帮助前端开发者提高生产力。Vue.js、React 和Angular 是目前国内最流行的三个前端 MVVM 框架，其中 Vue.js 凭借轻量、易上手的优势收获了大批粉丝
vue3-code-pratice:vue3，源码解析，最佳实践，响应式原理，composition api
03-24
结合 `Reactive` 和 `Effect` 函数，Vue3 创建了一个强大的响应式系统，它不仅支持深度监听，还能在依赖收集和变更通知中提供更好的性能优化。 3. **Composition API** Composition API 是 Vue3 的一大创新，它...
理解Vue 3响应式系统原理
https://blog.cmdragon.cn/
05-28 1639
Vue 3的诞生背景：Vue 2的局限与改进需求Vue 3的主要版本发布日期和目标：稳定性和性能的提升响应式系统：是一种数据绑定机制，在数据模型变化时，自动更新视图。在Vue中，响应式系统基于数据劫持和发布-订阅模式实现。
Vue3响应式系统源码深度解析与Proxy实现原理
本文围绕“Vue3 reactive源码解析”这一主题，深入剖析了其内部实现机制，并通过与Vue2的对比，揭示了现代前端框架在数据响应式处理上的演进路径。 首先，回顾Vue2的响应式原理可知，它依赖于`Object....
Vue3源码深度解析：乐高式模块组合的实现机制
Vue3中的Reactive包提供了响应式数据绑定的核心功能，它使得Vue组件能够感知数据的变化并自动更新视图。runtime-x包是Vue的运行时核心，它负责处理组件渲染和更新的逻辑。compile-x包负责模板的编译，将模板转换为...
Vue3核心源码解析
最新发布
guai_guai_guai的博客
04-20 1427
handler对象中可定义​​陷阱函数（Traps）​​，用于拦截 13 种对象操作（如getset等）当对 Proxy 实例进行操作时，会优先触发对应的陷阱函数，未定义的陷阱会直接转发到原始对象​​行为一致性​​Reflect方法严格遵循 ECMAScript 规范，确保代理对象的行为与原对象一致。​​代理链完整性​​在多层代理（如 Vue 的）中，Reflect能正确传递receiver，维护代理链的上下文。​​错误处理简化​​通过Reflect。
Vue3.0源码解读 - 编译系统
u014125106的博客
07-04 2250
position： 包含offset、line、column三个属性，offset记录parser解析到的位置相对原始template string开头的位置，line记录parser解析到的行数，column为列数，因为parse过程中会遇到\n\t\f之类的转义字符。 baseParse: 将template string解析成AST，AST是vue对节点的一种表述形式，和平时JS生成的抽象语法树是两码事。 export function baseParse( content: string, //
两周掌握Vue3（二）：Vue基本代码构成、Vue3指令详解
TracyCoder的博客
01-10 2090
在Vue CLI脚手架项目中，你可以在Vue文件的标签中使用Vue指令。Vue指令是Vue.js提供的一种特殊属性，用于在模板中实现数据绑定、条件渲染、循环渲染等功能。v-bind：用于动态绑定HTML属性，例如会将imageSrc的值绑定到src属性上。v-model：用于实现表单输入元素和应用状态之间的双向绑定，例如会将message的值与输入框的值进行双向绑定。v-ifv-elsev-else-if：用于条件性地渲染元素，例如会根据seen的值来决定是否渲染这个段落。v-for。
2024年最全Vue 3源码及原理，看这篇就懂了(1)，2024年最新handle机制面试
java_dazhuzhu的博客
05-14 811
对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。第二：面试考量的不仅是你对技术的掌握，更考量你对新技术的敏感度以及学习能力，Vue 3.0 作为受众极广的最新版本框架，自然是面试时必问的内容。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？js的基本类型有哪些？
Vue3源码 第一篇-总览
不忘初心
07-31 1661
Vue3源码总览 文章目录Vue3源码总览前言一、从哪里搞到源码？二、开始学习1.准备所需文件，并且引入Vue32.如何读源码3.Vue.createApp()3.1 ensureRenderer()总结 前言 之前读过Vue2的源码，所以Vue3源码发布后就迫不及待的赶紧下载下来读了读，对比Vue2的源码还是有许多改变，但是对Vue2源码有所了解还是比较好读的，我自己也是一边读代码一边记笔记，把自己的一些笔记和想法分享在这里，如果有错误的地方希望大佬斧正，废话不多说，开冲~~ 提示：以下是本篇文章
前端学习之路(1) Vue3核心源码解析源码目录结构
qq_32907491的博客
10-01 1358
通过软件框架阅读源码可以对框架本身运行机制进行学习，更能了解框架的API设计、原理及流程、设计思路；我们要知其然，更知其所以然。Vue 3的源码相对于Vue 2版本有了较大程度的改变，采用Monorepo规范的目录结构，同时使用TypeScript作为开发语言(vue2在2022年4月底也更换TypeScript为开发语言 )，并添加了很多新的特性和优化。
Vue3 源码阅读（1）：首先看看 Vue3 源码的项目结构
f18855666661的博客
08-09 3471
Vue3 的项目截图如下所示：compiler-core // 与平台无关的编译器核心compiler-dom // 针对浏览器的编译模块compiler-sfc // 用于解析 xxx.vue 单文件compiler-ssr // 针对服务器渲染的编译模块reactivity // 响应式系统runtime-core // 与平台无关的运行时核心runtime-dom // 针对浏览器的运行时，例如包含了很多 DOM 操作以及属性事件操作等等。...
vue3项目源码汇集
热门推荐
前端-尔嵘
02-18 1万+
vue3学习项目参考
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值