一. 了解几个概念
什么是响应式
在开始响应式原理与源码解析之前，需要先了解一下什么是响应式？首先明确一个概念：响应式是一个过程，它有两个参与方：
触发方：数据
响应方：引用数据的函数
当数据发生改变时，引用数据的函数会自动重新执行，例如，视图渲染中使用了数据，数据改变后，视图也会自动更新，这就完成了一个响应的过程。
副作用函数
在Vue与React中都有副作用函数的概念，什么是副作用函数？如果一个函数引用了外部的数据，这个函数会受到外部数据改变的影响，我们就说这个函数存在副作用，也就是我们所说的副作用函数。初听这个名字不太好理解，其实 副作用函数就是引用了数据的函数或是与数据相关联的函数。举个例子：
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title>
</head><body><div id="app"></div><script>const obj = {name: 'John',}// 副作用函数 effectfunction effect() {app.innerHTML = obj.nameconsole.log('effect', obj.name)}effect()setTimeout(() => {obj.name = 'ming'// 手动执行 effect 函数effect()}, 1000);</script>
</body>
</html>在上面例子中，effect函数里面引用了外部的数据obj.name,如果这个数据发生了改变，则会影响到这个函数，类似effect的这种函数就是副作用函数。
实现响应式的基本步骤
在上面的例子中,当obj.name发生了改变，effect是我们手动执行的，如果能监听到obj.name的变化，让其自动执行副作用函数effect，那么就实现了响应式的过程。其实无论是 Vue2 还是 Vue3 ，响应式的核心都是 数据劫持/代理、依赖收集、依赖更新，只不过由于实现数据劫持方式的差异从而导致具体实现的差异。
Vue2响应式：基于Object.defineProperty()实现的数据的劫持Vue3响应式：基于Proxy实现对整个对象的代理
关于Vue2的响应式这里不做重点讲解，这篇文章主要关注Vue3响应式原理的实现。
二. Proxy 与 Reflect
在解析Vue3的响应式原理之前，首先需要了解两个ES6新增的API:Porxy与Reflect。
Proxy
Proxy: 代理，顾名思义主要用于为对象创建一个代理，从而实现对对象基本操作的拦截和自定义。可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。基本语法：
let proxy = new Proxy(target, handler);target: 需要拦截的目标对象handler: 也是一个对象，用来定制拦截行为 举个例子：
const obj = {name: 'John',age: 16
}const objProxy = new Proxy(obj,{})
objProxy.age = 20
console.log('obj.age',obj.age);
console.log('objProxy.age',objProxy.age);
console.log('obj与objProxy是否相等',obj === objProxy);
// 输出
[Log] obj.age – 20
[Log] objProxy.age – 20
[Log] obj与objProxy是否相等 – false这里objProxy的handler为空，则直接指向被代理对象,并且代理对象与数据源对象并不全等.如果需要更加灵活的拦截对象的操作，就需要在handler中添加对应的属性。例如：
const obj = {name: 'John',age: 16
}const handler = {get(target, key, receiver) {console.log(`获取对象属性${key}值`)return target[key]},set(target, key, value, receiver) {console.log(`设置对象属性${key}值`)target[key] = value},deleteProperty(target, key) {console.log(`删除对象属性${key}值`)return delete target[key]},
}const proxy = new Proxy(obj, handler)
console.log(proxy.age)
proxy.age = 20
console.log(delete proxy.age)// 输出
[Log] 获取对象属性age值 (example01.html, line 22)
[Log] 16 (example01.html, line 36)
[Log] 设置对象属性age值 (example01.html, line 26)
[Log] 删除对象属性age值 (example01.html, line 30)
[Log] true (example01.html, line 38)上面的例子，我们在捕获器中定义了set()、get()、deleteProperty()属性，通过对proxy的操作实现了对obj的操作拦截。这些属性的触发方法有如下参数：
target—— 是目标对象，该对象被作为第一个参数传递给new Proxykey—— 目标属性名称value—— 目标属性的值receiver—— 指向的是当前操作 正确的上下文。如果目标属性是一个getter访问器属性，则receiver就是本次读取属性所指向的this对象。通常，receiver这就是proxy对象本身,但是如果我们从proxy继承，则receiver指的是从该proxy继承的对象当然除了以上三个还有一些常用的属性操作方法：
has()，拦截：in操作符.ownKeys(),拦截：Object.getOwnPropertyNames(proxy) Object.getOwnPropertySymbols(proxy) Object.keys(proxy)construct(),拦截：new操作等
Reflect
Reflect: 反射，就是将代理的内容反射出去。Reflect与Proxy一样，也是 ES6 为了操作对象而提供的新 API。它提供拦截JavaScript操作的方法，这些方法与Proxy handlers 提供的的方法是一一对应的，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。且 Reflect 不是一个函数对象，即不能进行实例化，其所有属性和方法都是静态的。还是上面的例子
const obj = {name: 'John',age: 16
}const handler = {get(target, key, receiver) {console.log(`获取对象属性${key}值`)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log(`设置对象属性${key}值`)return Reflect.set(target, key, value, receiver)},deleteProperty(target, key) {console.log(`删除对象属性${key}值`)return Reflect.deleteProperty(target, key)},
}const proxy = new Proxy(obj, handler)
console.log(proxy.age)
proxy.age = 20
console.log(delete proxy.age)上面的例子中
Reflect.get()代替target[key]操作Reflect.set()代替target[key] = value操作Reflect.deleteProperty()代替delete target[key]操作 当然除了上面的方法还有一些常用的Reflect方法：
Reflect.construct(target, args)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)三. reactive、ref源码解析
了解了Proxy与Reflect，看下Vue3是如何通过porxy实现响应式的。其核心是下面要介绍的两个方法：reactive、ref.这里依照Vue3.2版本的源码进行解析。
reactive的源码实现
打开源文件，找到文件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)
}刚开始对
target进行响应式只读判断，如果为true，则直接返回target，reactive实现的核心方法是createReactiveObject()：
function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandler<any>,collectionHandlers: ProxyHandler<any>,proxyMap: WeakMap<Target, any>
) {if (!isObject(target)) {if (__DEV__) {console.warn(`value cannot be made reactive: ${String(target)}`)}return target}// target is already a Proxy, return it.// exception: calling readonly() on a reactive objectif (target[ReactiveFlags.RAW] &&!(isReadonly && target[ReactiveFlags.IS_REACTIVE])) {return target}// target already has corresponding Proxyconst existingProxy = proxyMap.get(target)if (existingProxy) {return existingProxy}// only a whitelist of value types can be observed.const targetType = getTargetType(target)if (targetType === TargetType.INVALID) {return target}const proxy = new Proxy(target,targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers)proxyMap.set(target, proxy)return proxy
}createReactiveObject()方法有五个参数：target： 传入的原始目标对象isReadonly: 是否是只读的标识baseHandlers: 为普通对象创建proxy时的第二个参数handlercollectionHandlers: 为collection类型对象创建proxy时的第二个参数handlerproxyMap:WeakMap类型的map，主要用于存储target与他的proxy之间的对应关系
function targetTypeMap(rawType: string) {switch (rawType) {case 'Object':case 'Array':return TargetType.COMMONcase 'Map':case 'Set':case 'WeakMap':case 'WeakSet':return TargetType.COLLECTIONdefault:return TargetType.INVALID}
}源码可以看到，他将对象分为
COMMON对象（Object和Array）与COLLECTION类型对象(Map、Set、WeakMap、WeakSet),这样区分的主要目的是为了根据不通的对象类型，来定制不同的handler在
createReactiveObject()的前几行，进行了一系列的判断：首先判断
target是否是对象，如果为false,直接return判断
target是否是响应式对象，如果为true,直接return判断是否已经为
target创建过proxy了，如果为true,直接return判断
target是否是刚才上面提到的6种对象类型，如果为false,直接return如果以上条件都满足，则为
target创建proxy,并return这个proxy
接下来就是根据不同的对象类型，传入不同的handler的逻辑处理了，主要关注baseHandlers，里面存在五个属性操作方法，这重点解析get与set方法。
源码位置：
packages/reactivity/src/baseHandlers.ts
export const mutableHandlers: ProxyHandler<object> = {get,set,deleteProperty,has,ownKeys
}get与依赖收集
可以看到
mutableHandlers里面就是我们熟悉的各种钩子函数。当我们对proxy对象进行访问或是修改时，调用相应的函数进行处理。首先看get里面是如何对访问target的副作用函数进行收集的：
function createGetter(isReadonly = false, shallow = false) {return function get(target: Target, key: string | symbol, receiver: object) {if (key === ReactiveFlags.IS_REACTIVE) {return !isReadonly} else if (key === ReactiveFlags.IS_READONLY) {return isReadonly} else if (key === ReactiveFlags.RAW &&receiver ===(isReadonly? shallow? shallowReadonlyMap: readonlyMap: shallow? shallowReactiveMap: reactiveMap).get(target)) {return target}const targetIsArray = isArray(target)if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {return Reflect.get(arrayInstrumentations, key, receiver)}const res = Reflect.get(target, key, receiver)if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {return res}if (!isReadonly) {track(target, TrackOpTypes.GET, key)}if (shallow) {return res}if (isRef(res)) {// ref unwrapping - does not apply for Array + integer key.const shouldUnwrap = !targetIsArray || !isIntegerKey(key)return shouldUnwrap ? res.value : res}if (isObject(res)) {// Convert returned value into a proxy as well. we do the isObject check// here to avoid invalid value warning. Also need to lazy access readonly// and reactive here to avoid circular dependency.return isReadonly ? readonly(res) : reactive(res)}return res}
}如果
key值为__v_isReactive、__v_isReadonly进行相应的返回，如果key==='__v_raw'并且WeakMap中key为target的值不为空，则返回target如果
target是数组，则 重写/增强 数组对应的方法在这些方法里面调用
track()进行依赖收集数组元素的查找方法：
includes、indexOf、lastIndexOf修改原数组 的方法：
push、pop、unshift、shift、splice
对
Reflect.get()方法的返回值，也就是当前数据对象的属性值res进行判断，如果res是普通对象且非只读，则调用track()进行依赖收集如果
res是浅层响应，直接返回，如果res是ref对象，则返回其value值如果
res是 对象类型并且是只读的，则调用readonly(res),否则递归调用reactive(res)方法如果以上都不满足，直接向外返回对应的 属性值
那么核心方法就是如果利用**
track()**进行依赖收集的处理了,源码在``packages/reactivity/src/effect.ts`
export function track(target: object, type: TrackOpTypes, key: unknown) {if (!isTracking()) {return}let depsMap = targetMap.get(target)if (!depsMap) {targetMap.set(target, (depsMap = new Map()))}let dep = depsMap.get(key)if (!dep) {depsMap.set(key, (dep = createDep()))}const eventInfo = __DEV__? { effect: activeEffect, target, type, key }: undefinedtrackEffects(dep, eventInfo)
}首先进行是否正在进行依赖收集的判断处理
const targetMap = new WeakMap<any, KeyToDepMap>()创建一个targetMap容器，用于保存和当前响应式对象相关的依赖内容，本身是一个WeakMap类型将对应的 响应式对象 作为
targetMap的 键，targetMap的Value是一个depsMap（属于Map实例），depsMap存储的就是和当前响应式对象的每一个key对应的具体依赖depsMap的键是响应式数据对象的key，Value是一个deps（属于Set实例），这里之所以使用Set是为了避免副作用函数的重复添加，避免重复调用
以上就是整个**get()**捕获器以及依赖收集的核心流程。
set与依赖更新
我们在回到baseHandlers中看Set捕获器中是如何进行依赖更新的
function createSetter(shallow = false) {return function set(target: object,key: string | symbol,value: unknown,receiver: object): boolean {let oldValue = (target as any)[key]if (!shallow) {value = toRaw(value)oldValue = toRaw(oldValue)if (!isArray(target) && isRef(oldValue) && !isRef(value)) {oldValue.value = valuereturn true}} else {// in shallow mode, objects are set as-is regardless of reactive or not}const hadKey =isArray(target) && isIntegerKey(key)? Number(key) < target.length: hasOwn(target, key)const result = Reflect.set(target, key, value, receiver)// don't trigger if target is something up in the prototype chain of originalif (target === toRaw(receiver)) {if (!hadKey) {trigger(target, TriggerOpTypes.ADD, key, value)} else if (hasChanged(value, oldValue)) {trigger(target, TriggerOpTypes.SET, key, value, oldValue)}}return result}
}首先进行旧值的保存
oldValue如果不是浅层响应，
target是普通对象，并且旧值是个响应式对象，则执行赋值操作：oldValue.value = value,返回true，表示赋值成功判断是否存在对应key值
hadKey执行
Reflect.set设置对应的属性值判断对象是原始原型链上的内容（非自定义添加），则不触发依赖更新
根据目标对象不存在对应的 key, 调用
trigger,进行依赖更新
以上就是整个baseHandlers关于依赖收集与依赖更新的核心流程。
ref的源码实现
我们知道ref可以定义基本数据类型、引用数据类型的响应式。来看下它的源码实现：packages/reactivity/src/ref.ts
export function ref(value?: unknown) {return createRef(value)
}function createRef(rawValue: unknown, shallow = false) {if (isRef(rawValue)) {return rawValue}return new RefImpl(rawValue, shallow)
}class RefImpl<T> {private _value: Tprivate _rawValue: Tpublic dep?: Dep = undefinedpublic readonly __v_isRef = trueconstructor(value: T, public readonly _shallow = false) {this._rawValue = _shallow ? value : toRaw(value)this._value = _shallow ? value : convert(value)}get value() {trackRefValue(this)return this._value}set value(newVal) {newVal = this._shallow ? newVal : toRaw(newVal)if (hasChanged(newVal, this._rawValue)) {this._rawValue = newValthis._value = this._shallow ? newVal : convert(newVal)triggerRefValue(this, newVal)}}
}从上面的函数调用流程可以看出，实现
ref的核心就是实例化了一个RefImpl对象。为什么这里要实例化一个RefImpl对象呢，其目的在于Proxy代理的目标也是对象类型，无法通过为基本数据类型创建proxy的方式来进行数据代理。只能把基本数据类型包装为一个对象，通过自定义的get、set方法进行 依赖收集 和 依赖更新来看
RefImpl对象属性的含义：_ value：用于
保存ref当前值，如果传递的参数是对象，它就是用于保存经过reactive函数转化后的值，否则_value与_rawValue相同_ rawValue：用于保存当前ref值对应的原始值，如果传递的参数是对象，它就是用于保存转化前的原始值，否则
_value与_rawValue相同。这里toRaw()函数的作用就是将的响应式对象转为普通对象dep：是一个
Set类型的数据，用来存储当前的ref值收集的依赖。至于这里为什么用Set上面我们有阐述，这里也是同样的道理_v_isRef ：标记位，只要被
ref定义了，都会标识当前数据为一个Ref，也就是它的值标记为true另外可以很清楚的看到
RefImpl类暴露给实例对象的get、set方法是value，所以对于ref定义的响应式数据的操作我们都要带上**.value**
如果传入的值是对象类型，会调用
convert()方法，这个方法里面会调用reactive()方法对其进行响应式处理RefImpl实例关键就在于trackRefValue(this)和triggerRefValue(this, newVal)的两个函数的处理，我们大概也知道它们就是依赖收集、依赖更新,原理基本与reactive处理方式类似，这里就不在阐述了
五. 总结
对于基础数据类型只能通过
ref来实现其响应式，核心还是将其包装成一个RefImpl对象，并在内部通过自定义的get value()与set value(newVal)实现依赖收集与依赖更新。对于对象类型，
ref与reactive都可以将其转化为响应式数据，但其在ref内部，最终还是会调用reactive函数实现转化。reactive函数，主要通过创建了Proxy实例对象，通过Reflect实现数据的获取与修改。
一些参考：
https://github.com/vuejs/vue
https://zh.javascript.info/proxy#reflect
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
