Vue2 响应式原理 学过 Vue2 的话应该知道响应式原理是由 Object.defineProperty 对数据进行劫持，再加上订阅发布，实现数据的响应的。
Object.defineProperty 存在以下几个方面的缺点。

1. 初始化的时候需要遍历对象的所有属性进行劫持，如果对象存在嵌套还需要进行递归。导致初始化的时候需要消耗一些资源用于递归遍历。
2. 从上面可以推导出 Vue2 对于新增、删减对象属性是无法进行劫持，需要通过 Vue.set、Vue.delete 进行操作。
3. 每个调用者会生成一个 Watcher，造成内存占用。
4. 无法劫持 Set、Map 对象。

Vue3 响应式原理 针对以上问题，Vue3 改用了 ES6 原生的 Proxy 对数据进行代理。
Proxy 基本用法如下：

const reactive = (target) => { return new Proxy(target, { get(target, key) { console.log("get: ", key); // return Reflect.get(target, key); return target[key]; },set(target, key, value) { console.log("set: ", key, " = ", value); // Reflect.set(target, key, value); target[key] = value; return value; }, }); }; var a = reactive({ count: 1 }); console.log(a.count); a.count = 2; console.log(a.count); // log 输出 // get:count // 1 // set:count=2 // get:count // 2

如此便可检测到数据的变化。接下来只需在 get 进行收集依赖，set 通知依赖更新。
接下来还需借助 effect、track 和 trigger 方法。
effect 函数传入一个回调函数，回调函数会立即执行，并自动与响应式数据建立依赖关系。
track 在 proxy get 中执行，建立依赖关系。
trigger 响应式数据发生变化时，根据依赖关系找到对应函数进行执行。
代码实现如下：

const reactive = (target) => { return new Proxy(target, { get(target, key) { console.log("[proxy get] ", key); track(target, key); // return Reflect.get(target, key); return target[key]; },set(target, key, value) { console.log("[proxy set]", key, " = ", value); // Reflect.set(target, key, value); target[key] = value; trigger(target, key); return value; }, }); }; // 用于存放 effect 传入的 fn，便于 track 时找到对应 fn const effectStack = []; // 用于保存 响应式对象 和 fn 的关系 // { //target: { //key: [fn, fn]; //} // } const targetMap = {}; const track = (target, key) => { let depsMap = targetMap[target]; if (!depsMap) { targetMap[target] = depsMap = {}; } let dep = depsMap[key]; if (!dep) { depsMap[key] = dep = []; }// 建立依赖关系 const activeEffect = effectStack[effectStack.length - 1]; dep.push(activeEffect); }; const trigger = (target, key) => { const depsMap = targetMap[target]; if (!depsMap) return; const deps = depsMap[key]; // 根据依赖关系，找出 fn 并重新执行 deps.map(fn => { fn(); }); }; const effect = (fn) => { try { effectStack.push(fn); fn(); } catch (error) { effectStack.pop(fn); } }; var a = reactive({ count: 1 }); effect(() => { console.log("[effect] ", a.count); }); a.count = 2; // log 输出 // [proxy get]count // [effect]1 // [proxy set]count=2 // [proxy get]count // [effect]2

以上代码并不是 Vue3 的源码，而是 Vue3 响应式的原理，相比起 Vue2 要更加简单。
执行顺序为

1. 调用 reactive 代理响应式对象；
2. 调用 effect ，会将 fn 保存至 effectStack，在执行 fn 时会触发 Proxy 的 get；
3. 从 Proxy 的 get 触发 track，将数据与 fn 建立关系；
4. 修改响应式数据，触发 Proxy 的 set；
5. 从 Proxy 的 set 触发 trigger，从而找出对应的 fn 并执行。

弄清楚原理再去看源码会简单很多，下面我们一起去看下源码。
Vue3 响应式源码 Vue3 的响应式是一个独立的模块，不依赖框架，甚至可以在 React、Angular 中使用。
reactive 函数位于 packages/reactivity/src/reactive.ts

// packages/reactivity/src/reactive.ts export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) }function createReactiveObject( target: Target, isReadonly: boolean, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler, proxyMap: WeakMap ) { // ... const proxy = new Proxy( target, // 对 Set、Map 的集合使用 collectionHandlers（mutableCollectionHandlers） // 普通对象使用 baseHandlers（mutableHandlers） targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) // ... return proxy }

接下来看下 mutableHandlers

// packages/reactivity/src/baseHandlers.ts export const mutableHandlers: ProxyHandler