一、reactive源码
Vue3中响应数据核心是 reactive ， reactive 中的实现是由 proxy 加 effect 组合，先来看一下 reactive 方法的定义
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
// 如果目标对象是一个只读的响应数据,则直接返回目标对象
if (target && (target as Target).__v_isReadonly) {
return target
}
// 否则调用 createReactiveObject 创建 observe
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers
)
}
createReactiveObject 创建 observe
// Target 目标对象
// isReadonly 是否只读
// baseHandlers 基本类型的 handlers
// collectionHandlers 主要针对(set、map、weakSet、weakMap)的 handlers
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<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 object
// 如果目标对象已经是个 proxy 直接返回
if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
return target
}
// target already has corresponding Proxy
if (
hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
) {
return isReadonly ? target.__v_readonly : target.__v_reactive
}
// only a whitelist of value types can be observed.
// 检查目标对象是否能被观察, 不能直接返回
if (!canObserve(target)) {
return target
}
// 使用 Proxy 创建 observe
const observed = new Proxy(
target,
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
)
// 打上相应标记
def(
target,
isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
observed
)
return observed
}
// 同时满足3个条即为可以观察的目标对象
// 1. 没有打上__v_skip标记
// 2. 是可以观察的值类型
// 3. 没有被frozen
const canObserve = (value: Target): boolean => {
return (
!value.__v_skip &&
isObservableType(toRawType(value)) &&
!Object.isFrozen(value)
)
}
// 可以被观察的值类型
const isObservableType = /*#__PURE__*/ makeMap(
'Object,Array,Map,Set,WeakMap,WeakSet'
)
结语
看到这里我们大概清楚 reactive 是做为整个响应式的入口，负责处理目标对象是否可观察以及是否已被观察的逻辑，最后使用 Proxy 进行目标对象的代理，对 es6 Proxy 概念清楚的同学应该 Proxy 重点的逻辑处理在 Handlers , 接下来我们就一起去看看各种 Handlers
Reflect.set简介
Reflect.set 是 JavaScript 中的一个内置函数，用于设置对象的属性值。
使用 Reflect.set 可以通过属性名将值设置给对象。它的语法如下：
javascript复制代码
Reflect.set(target, propertyKey, value)
target：要设置属性值的目标对象。propertyKey：要设置的属性名。value：要设置的属性值。
以下是一个示例，演示如何使用 Reflect.set 设置对象的属性值：
javascript复制代码
const obj = {
name: 'John',
age: 25
};
Reflect.set(obj, 'name', 'Alice');
console.log(obj.name); // 输出：Alice
Reflect.set(obj, 'age', 30);
console.log(obj.age); // 输出：30
在上面的示例中，我们使用 Reflect.set 分别将 name 属性和 age 属性的值进行了修改。
二、ref源码
接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
更多文档: vue3js.cn/vue-composi…
正文
ref 跟 reactive 都是响应系统的核心方法，作为整个系统的入口
可以将 ref 看成 reactive 的一个变形版本，这是由于 reactive 内部采用 Proxy 来实现，而 Proxy 只接受对象作为入参，这才有了 ref 来解决值类型的数据响应，如果传入 ref 的是一个对象，内部也会调用 reactive 方法进行深层响应转换
Ref 是如何创建的
我们还是先从定义抓起，ref 接收一个可选的 unknown 做为入参，接着直接调用 createRef
createRef 先判断 value 是否已经是一个 ref, 如果是则直接返回，如果不是接着判断是不是浅观察，如果是浅观察直接构造一个 ref 返回，不是则将 rawValue 转换成 reactive 再构造一个 ref 返回
export function ref(value?: unknown) {
return createRef(value)
}
/**
* @description:
* @param {rawValue} 原始值
* @param {shallow} 是否是浅观察
*/
function createRef(rawValue: unknown, shallow = false) {
// 如果已经是ref直接返回
if (isRef(rawValue)) {
return rawValue
}
// 如果是浅观察直接观察，不是则将 rawValue 转换成 reactive ,
// reactive 的定义在下方
let value = shallow ? rawValue : convert(rawValue)
// ref 的结构
const r = {
// ref 标识
__v_isRef: true,
get value() {
// 依赖收集
track(r, TrackOpTypes.GET, 'value')
return value
},
set value(newVal) {
if (hasChanged(toRaw(newVal), rawValue)) {
rawValue = newVal
value = shallow ? newVal : convert(newVal)
// 触发依赖
trigger(
r,
TriggerOpTypes.SET,
'value',
__DEV__ ? { newValue: newVal } : void 0
)
}
}
}
return r
}
// 如是是对象则调用 reactive, 否则直接返回
const convert = <T extends unknown>(val: T): T =>
isObject(val) ? reactive(val) : val
三、BaseHandlers
这里照顾一下新同学，科普一下 handler，音译为处理器，我们也可以理解为处理器，在Proxy这篇文章中我们了解到 Proxy(target, handlers) 接收两个参数，target 为目标对象，handlers 就是针对我们对 target 操作的一系列行为同时做一些处理
正文
在 basehandlers 中包含了四种 handler
- mutableHandlers 可变处理
- readonlyHandlers 只读处理
- shallowReactiveHandlers 浅观察处理（只观察目标对象的第一层属性）
- shallowReadonlyHandlers 浅观察 && 只读处理
其中 readonlyHandlers shallowReactiveHandlers shallowReadonlyHandlers 都是 mutableHandlers 的变形版本，这里我们主要针对 mutableHandlers 展开
mutableHandlers
我们还是选择从定义看起
export const mutableHandlers: ProxyHandler<object> = {
get, // 用于拦截对象的读取属性操作
set, // 用于拦截对象的设置属性操作
deleteProperty, // 用于拦截对象的删除属性操作
has, // 检查一个对象是否拥有某个属性
ownKeys // 针对 getOwnPropertyNames, getOwnPropertySymbols, keys 的代理方法
}
get set 代码量稍微多点，我们先来点轻松的
/**
* @description: 用于拦截对象的删除属性操作
* @param {target} 目标对象
* @param {key} 键值
* @return {Boolean}
*/
function deleteProperty(target: object, key: string | symbol): boolean {
// hasOwn 的实现放下方了，检查一个对象是否包含当前key
const hadKey = hasOwn(target, key)
const oldValue = (target as any)[key]
// Reflect 作用在于完成目标对象的默认，这里即指删除
const result = Reflect.deleteProperty(target, key)
// 如果该值被成功删除则调用 trigger,
// trigger 为 effect 里的方法，effect 为 reactive 的核心, 后面会讲到
if (result && hadKey) {
trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
}
return result
}
/**
* @description: 检查一个对象是否拥有某个属性
* @param {target} 目标对象
* @param {key} 键值
* @return {Boolean}
*/
function has(target: object, key: string | symbol): boolean {
const result = Reflect.has(target, key)
// track 也为 effect 里的方法，effect 为 reactive 的核心, 后面会讲到
track(target, TrackOpTypes.HAS, key)
return result
}
// 返回一个由目标对象自身的属性键组成的数组
function ownKeys(target: object): (string | number | symbol)[] {
track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
return Reflect.ownKeys(target)
}
const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
val: object,
key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
接下来再来看set get方法
set
const set = /*#__PURE__*/ createSetter()
/**
* @description: 拦截对象的设置属性操作
* @param {shallow} 是否是浅观察
*/
function createSetter(shallow = false) {
/**
* @description:
* @param {target} 目标对象
* @param {key} 设置的属性的名称
* @param {value} 要改变的属性值
* @param {receiver} 如果遇到 setter，receiver则为setter调用时的this值
*/
return function set(
target: object,
key: string | symbol,
value: unknown,
receiver: object
): boolean {
const oldValue = (target as any)[key]
// 如果模式不是浅观察
if (!shallow) {
value = toRaw(value)
// 并且目标对象不是数组，旧值是ref，新值不是ref，则直接赋值，注意这里提到ref，这里不展开讲，后面详细讲
if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
oldValue.value = value
return true
}
} else {
// in shallow mode, objects are set as-is regardless of reactive or not
}
// 检查对象是否有这个属性
const hadKey = hasOwn(target, key)
// 赋值
const result = Reflect.set(target, key, value, receiver)
// don't trigger if target is something up in the prototype chain of original
if (target === toRaw(receiver)) {
if (!hadKey) {
// 如是不存在则trigger ADD
trigger(target, TriggerOpTypes.ADD, key, value)
} else if (hasChanged(value, oldValue)) {
// 存在则trigger SET
trigger(target, TriggerOpTypes.SET, key, value, oldValue)
}
}
return result
}
}
get
const get = /*#__PURE__*/ createGetter()
/**
* @description: 用于拦截对象的读取属性操作
* @param {isReadonly} 是否只读
* @param {shallow} 是否浅观察
*/
function createGetter(isReadonly = false, shallow = false) {
/**
* @description:
* @param {target} 目标对象
* @param {key} 需要获取的值的键值
* @param {receiver} 如果遇到 setter，receiver则为setter调用时的this值
*/
return function get(target: object, key: string | symbol, receiver: object) {
// ReactiveFlags 是在reactive中声明的枚举值，如果key是枚举值则直接返回对应的布尔值
if (key === ReactiveFlags.isReactive) {
return !isReadonly
} else if (key === ReactiveFlags.isReadonly) {
return isReadonly
} else if (key === ReactiveFlags.raw) { // 如果key是raw 则直接返回目标对象
return target
}
const targetIsArray = isArray(target)
// 如果目标对象是数组并且 key 属于三个方法之一 ['includes', 'indexOf', 'lastIndexOf']，即触发了这三个操作之一
if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
return Reflect.get(arrayInstrumentations, key, receiver)
}
const res = Reflect.get(target, key, receiver)
// 如果 key 是 symbol 内置方法，或者访问的是原型对象，直接返回结果，不收集依赖
if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {
return res
}
// 如果是浅观察并且不为只读则调用 track Get, 并返回结果
if (shallow) {
!isReadonly && track(target, TrackOpTypes.GET, key)
return res
}
// 如果get的结果是ref
if (isRef(res)) {
// 目标对象为数组并且不为只读调用 track Get, 并返回结果
if (targetIsArray) {
!isReadonly && track(target, TrackOpTypes.GET, key)
return res
} else {
// ref unwrapping, only for Objects, not for Arrays.
return res.value
}
}
// 目标对象不为只读则调用 track Get
!isReadonly && track(target, TrackOpTypes.GET, key)
// 由于 proxy 只能代理一层，所以 target[key] 的值如果是对象，就继续对其进行代理
return isObject(res)
? isReadonly
? // need to lazy access readonly and reactive here to avoid
// circular dependency
readonly(res)
: reactive(res)
: res
}
}
const arrayInstrumentations: Record<string, Function> = {}
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
arrayInstrumentations[key] = function(...args: any[]): any {
const arr = toRaw(this) as any
for (let i = 0, l = (this as any).length; i < l; i++) {
track(arr, TrackOpTypes.GET, i + '')
}
// we run the method using the original args first (which may be reactive)
const res = arr[key](...args)
if (res === -1 || res === false) {
// if that didn't work, run it again using raw values.
return arr[key](...args.map(toRaw))
} else {
return res
}
}
})
结语
到这里 baseHandlers 整个就差不多就讲完，我们会发现里面频繁的调用的几个函数
- track 依赖收集
- trigger 触发依赖
这两个函数为 effect 里的方法，effect 为 reactive 的核心, 详情可以点这里
