本篇我们会继续探索 reactive 函数中对 Map/WeakMap/Set/WeakSet 对象的代理实现。
由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。
Set的属性和方法
Map的属性和方法
// reactive.ts
export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
get: /*#__PURE__*/ createInstrumentationGetter(false, false)
}
由于Map/Set不像Object或Array那样可直接通过属性访问的方式获取其中的元素,而是通过 add , has , delete 操作,因此需要像处理Array的 slice 等方法那样代理Map/Set的这些方法。
// collectionHandlers.ts
type MapTypes = Map<any, any> | WeakMap<any, any>
type SetTypes = Set<any, any> | WeakSet<any, any>
// 代理Map/Set原生的方法
// 没有代理返回迭代器的方法??
const mutableInstrumentations = {
get(this: MapTypes, key: unknown) {
return get(this, key)
}
get size() {
// 原生的size属性就是一个访问器属性
return size(this as unknown as IterableCollections)
},
has,
add,
set,
delete: deleteEntry, // delete 是关键字不能作为变量或函数名称
clear,
forEach: createForEach(false, false)
}
function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
const instrumentations = mutableInstrumentations
return (
target: CollectionTypes,
key: string | symbol,
receiver: CollectionTypes
) => {
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadonly
}
else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly
}
else if (key === ReactiveFlags.RAW) {
return target
}
// 代理Map/WeakMap/Set/WeakSet的内置方法
return Reflect.get(
hasOwn(instrumentations, key) && key in target
? instrumentations
: target,
key,
receiver
)
}
}
在TypeScript中可通过类型声明定义变量的类型(其中包含复合类型),而类型推导则可以根据赋值语句中右侧字面量推导出变量的实际类型,或通过当前变量使用的场景推导出当前实际类型(尤其是定义为复合类型)。但有时无法通过当前使用场景执行精确的类型推导,这时开发者可以通过 as 断言告知TypeScript编译器该变量当前使用范围的数据类型(要相信自己一定比编译器更了解自己的代码:D)。
那么 as unknown 即表示将类型修改为 unknown ,那么类型为 unknown 是表示什么呢? unknown 是TypeScript3.0引入的top type(任何其他类型都是它的subtype),意在提供一种更安全的方式替代 any 类型( any 类型是top type也是bottom type,使用它意味和绕过类型检查),具有如下特点:
// 1. 任何其它类型都可以赋值给`unknown`类型的变量
let uncertain: unknown = 'Hello'
uncertain = 12
uncertain = { hello: () => 'Hello' }
// 2.`unknown`类型的变量只能赋值给`any`或`unknown`类型的变量
let uncertain: unknown = 'Hello'
let noSure: any = uncertain
let notConfirm: unknown = uncertain
// 3. 如果不对`unknown`类型的变量执行类型收缩,则无法执行其它任何操作
let uncertain = { hello: () => 'Hello' }
uncertain.hello() // 编译报错
// 通过断言as收缩类型
(uncertain as {hello: () => string}).hello()
let uncertain: unknown = 'Hello'
// 通过typeof或instanceof收缩类型
if (typeof uncertain === 'string') {
uncertain.toLowerCase()
}
那么 as unknown 后的 as IterableCollections 意图就十分明显了,就是对变量进行类型收缩。 this as unknown as IterableCollections 其实就是 as IterableCollections 啦。
然后我们逐一看看代理方法的实现吧
get 方法只有Map对象拥有,因此其中主要思路是从Map对象中获取值,跟踪键值变化后将值转换为响应式对象返回即可。
但由于要处理 readonly(reactive(new Map())) 这一场景,添加了很多一时让人看不懂的代码而已。
const getProto = <T extends CollectionTypes>(v: T): any => Reflect.getProrotypeOf(v)
// 代理Map/WeakMap的get方法
function get(
target: MapTypes, // 指向this,由于Map对象已经被代理,因此this为代理代理
key: unknown,
isReadonly = false,
isShallow = false
) {
/**
* 1. 针对readonly(reactive(new Map()))的情况,
* target获取的是代理对象,而rawTarget的是Map对象
* 2. 针对reactive(new Map())的情况,
* target和rawTarget都是指向Map对象
*/
target = (target as any)[ReactiveFlags.RAW]
const rawTarget = toRaw(target)
/**
* 若key为代理对象,那么被代理对象和代理对象的键都会被跟踪,即
* const key = { value: 'foo' }
* const pKey = reactive(key),
* const kvs = reactive(new Map())
* kvs.set(pKey, 1)
*
* effect(() => {
* console.log('pKey', kvs.get(pKey))
* })
* effect(() => {
* console.log('key', kvs.get(key))
* })
*
* kvs.set(pKey, 2)
* // 回显 pkey 2 和 key 2
* kvs.set(key, 3)
* // 回显 key 2
*/
const rawKey = toRaw(key)
if (key !== rawKey) {
!isReadonly && track(rawTraget, TrackOpTypes.GET, key)
}
!isReadonly && track(rawTraget, TrackOpTypes.GET, rawKey)
// 获取Map原型链上的has方法用于判断获取成员是否存在于Map對象上
const { has } = getProto(rawTarget)
const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
/**
* Map对象中存在则从Map对象或代理对象上获取值并转换为响应式对象返回。
* 针对readonly(reactive(new Map()))为什么是从响应对象上获取值,而不是直接从Map对象上获取值呢?
* 这是为了保持返回的值的结构,从响应式对象中获取值是响应式对象,在经过readonly的处理则返回的值就是readonly(reactive({value: 'foo'}))。
*/
if (has.call(rawTarget, key)) {
return wrap(target.get(key))
}
else if (has.call(rawTarget, rawKey)) {
return wrap(target.get(rawKey))
}
else if (target !== rawTarget) {
/**
* 针对readonly(reactive(new Map())),即使没有匹配的键值对,也要跟踪对响应式对象某键的依赖信息
* const state = reactive(new Map())
* const readonlyState = readonly(state)
*
* effect(() => {
* console.log(readonlyState.get('foo'))
* })
* // 回显 undefined
* state.set('foo', 1)
* // 回显 1
*/
target.get(key)
}
// 啥都没有找到就默认返回undefined,所以啥都不用写
}
function size(target: IterableCollections, isReadonly = false) {
// 针对readonly(reactive(new Map())) 或 readonly(reactive(new Set()))只需获取响应式对象即可,因此reactive对象也会对size的访问进行相同的操作。
target = (target as any)[RectiveFlags.RAW]
// 跟踪ITERATE_KEY即所有修改size的操作均会触发访问size属性的副作用函数
!iReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
/**
* 由于size为访问器属性因此若第三个参数传递receiver(响应式对象),而响应式对象并没有size访问器属性需要访问的属性和方法,则会报异常``。因此需要最终将Map或Set对象作为size访问器属性的this变量。
*/
return Reflect.get(target, 'size', target)
}
function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
const target = (this as any)[ReactiveFlags.RAW]
const rawTarget = toRaw(target)
const rawKey = toRaw(key)
// 和get方法代理一样,若key为代理对象则代理对象或被代理对象作为键的键值对发生变化都会触发访问has的副作用函数
if (key !== rawKey) {
!isReadonly && track(rawTarget, TrackOpTypes.HAS, key)
}
!isReadonly && track(rawTarget, TrackOpTypes.HAS, rawKey)
return key === rawKey
? target.has(key)
: target.has(key) || target.has(rawKey)
}
function add(this: SetTypes, value: unknown) {
value = toRaw(value)
const target = toRaw(this)
const proto = getProto(target)
const hadKey = proto.has.call(target, value)
// 当Set对象中没有该元素时则触发依赖ITERATE_KEY的副作用函数,因此ADD操作会影响Set对象的长度
if (!hadKey) {
target.add(value)
trigger(target, TriggerOpTypes.ADD, value, value)
}
return this
}
function set(this: MapTypes, key: unknown, value: unknown) {
value = toRaw(value)
const target = toRaw(this)
const { has, get } = getProto(target)
// 分别检查代理和非代理版本的key是否存在于Map对象中
let hadKey = has.call(target, key)
if (!hadKey) {
key = toRaw(key)
hadKey = has.call(target.key)
}
const oldValue = get.call(target, key)
target.set(key, value)
if (!hadKey) {
// 当Map对象中没有该元素时则触发依赖ITERATE_KEY的副作用函数,因此ADD操作会影响Map对象的长度
trigger(target, TriggerOpTypes.ADD, key, value)
}
else if (hasChanged(value, oldValue)) {
// 如果新旧值不同则触发修改,依赖该键值对的副作用函数将被触发
trigger(target, TriggerOpTypes.SET, key, value, oldValue)
}
}
注意: get 和 has 方法中会同时跟踪代理和非代理版本的键对应的元素变化,而 set 方法则只会触发查找到的代理或非代理版本的键对应的元素变化。
function deleteEntry(this: CollectionTypes, key: unknown) {
const target = toRaw(this)
const { has, get } = getProto(target)
let hadKey = has.call(target, key)
// 分别检查代理和非代理版本的key是否存在于Map/Set对象中
let hadKey = has.call(target, key)
if (!hadKey) {
key = toRaw(key)
hadKey = has.call(target.key)
}
// 如果当前操作的是Map对象则获取旧值
const oldValue = get ? get.call(target, key) : undefined
const result = target.delete(key)
if (hadKey) {
trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
}
return result
}
注意: get 和 has 方法中会同时跟踪代理和非代理版本的键对应的元素变化,而 deleteEntry 方法则只会触发查找到的代理或非代理版本的键对应的元素变化。
function clear(this: IterableCollections) {
const target = toRaw(this)
const hadItems = target.size !== 0
const oldTarget = undefined
const result = target.clear()
if (hadItems) {
trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)
}
return result
}
function createForEach(isReadonly: boolean, isShallow: boolean) {
return function forEach(
this: IterableCollections,
callback: Function,
thisArg?: unknown
) {
const observed = this as any
const target = observed[ReactiveFlags.RAW]
const rawTarget = toRaw(target)
const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
!isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
return target.forEach((value: unknown, key: unknown) => {
// 将key和value都转换为代理对象
return callback.call(thisArg, wrap(value), wrap(key), observed)
})
}
}
由于 forEach 会遍历所有元素(Map对象则是所有键值对),因此跟踪 ITERATE_KEY 即Map/Set对象元素个数发生变化则触发 forEach 函数的执行。
至此我们还没对 entries , values , keys 和 @@iterator 这些返回迭代器的对象方法进行代理,而源码中则在最后为 mutableInstrumentations 添加这些方法的代理。
const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator/*就是@@iterator*/]
iteratorMethods.forEach(method => {
mutableInstrumentations[method as string] = createIterableMethod(
method,
false,
false
)
})
function createIterableMethod(
method: string | symbol,
isReadonly: boolean,
isShallow: boolean
) {
return function(
this: IterableCollections,
...args: unknown[]
): Iterable & Iterator {
/**
* 1. 针对readonly(reactive(new Map()))的情况,
* target获取的是代理对象,而rawTarget的是Map或Set对象
* 2. 针对reactive(new Map())的情况,
* target和rawTarget都是指向Map或Set对象
*/
const target = (this as any)[ReactiveFlags.RAW]
const rawTarget = toRaw(target)
const targetIsMap = isMap(rawTarget)
const isPair = method === 'entries' || (method === Symbol.iterator && targetIsMap)
/**
* 当调用的是Map对象的keys方法,副作用函数并没有访问值对象,即副作用函数只依赖Map对象的键而没有依赖值。
* 而键只能增加或删除,值可增加、删除和修改,那么此时当且仅当键增删即size属性发生变化时才会触发副作用函数的执行。
* 若依赖值,那么修改其中一个值也会触发副作用函数执行。
*/
const isKeyOnly = method === 'keys' && targetIsMap
const innerIterator = target[method](...args)
const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
!isReadonly &&
track(
rawTarget,
TrackOpTypes.ITERATE,
isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
)
return {
// 迭代器协议
next() {
const { value, done } = innerIterator.next()
return done
? { value, done }
: {
value: isPair ? [wrap(value[0], wrap(value[1]))] : wrap(value),
done
}
},
// 可迭代协议
[Symbol.iterator]() {
return this
}
}
}
}
可迭代协议(iterable protocol),用于创建迭代器(iterator)。
如下内置类型都实现了可迭代协议:
下面的语言特性将会接收可迭代协议返回的迭代器
for...of
const [a, b] = [1, 2]
const a = [1,2], b = [...a]
Array.from()
Promise.all()
Promise.race()
yield*
让对象支持可迭代协议其实很简单,只需实现返回迭代器的 [Symbol.iterator] 方法即可。JavaScript Plain Old Object默认并没有支持可迭代协议,那么我们可以自行实现以下:
const iterablizeKeys = (obj: {}) => {
if (!obj[Symbol.iterator]) {
obj[Symbol.iterator] = () => {
const keys = Object.keys(obj) as const
let i = 0
// 返回一个迭代器
return {
next() {
return { value: keys[i++], done: i > keys.length }
}
}
}
}
return obj
}
const iterableObj = iterablizeKeys({a: 1, b: 2})
for (let item of iterableObj) {
console.log(item)
}
// 回显 a
// 回显 b
Array.from(iterableObj) // 返回 ['a', 'b']
迭代器协议(iterator protocol),提供不接受任何参数并返回 IteratorResult 对象的 next 方法,而 IteratorResult 对象包含指向当前元素的 value 属性和表示迭代是否已结束的 done 属性,当 done 属性值为 true 时表示迭代已结束。
迭代器协议的实现正如上面可迭代协议的示例中那样,不过我们还可以将可迭代协议和迭代对象在同一个对象上实现。
const iterablizeKeys = (obj: {}) => {
if (!obj[Symbol.iterator]) {
let iteratorState = {
keys: []
i: 0
}
// 迭代器协议
obj.next = () => ({ value: iteratorState.keys[iteratorState.i++], done: iteratorState.i > iteratorState.key.length })
// 可迭代协议
obj[Symbol.iterator] = () => {
iteratorState.keys = Object.keys(obj) as const
iteratorState.i = 0
// 返回一个迭代器
return this
}
}
return obj
}
const iterableObj = iterablizeKeys({a: 1, b: 2})
for (let item of iterableObj) {
console.log(item)
}
// 回显 a
// 回显 b
Array.from(iterableObj) // 返回 ['a', 'b']
本篇我们通过逐行阅读源码了解到reactive如何处理Map和Set对象了,下一篇我们将开始以 effect 为入口进一步了解副作用函数是如何通过 track 和 trigger 记录依赖和触发的。
尊重原创,转载请注明来自: https://www.cnblogs.com/fsjohnhuang/p/16147725.html肥仔John
prtite-vue 保留了 Vue 的一些基础特性,这使得 Vue 开发者可以无成本使用,在以往,当我们在开发一些小而简单的页面想要引用 Vue 但又常常因为包体积带来的考虑而放弃,现在,petite-vue 的出现或许可以拯救这种情况了,毕竟它真的很小,大小只有 5.8kb,大约只是 Alpine.js 的一半
前端程序员想必对尤雨溪及其开发的 Vue 框架不陌生。Vue 是一套用于构建用户界面的渐进式 JavaScript 框架,在 2014 年发布后获得了大量开发者的青睐,目前已更新至 3.0 版本
我们看到在v-if和v-for的解析过程中都会生成块对象,而且是v-if的每个分支都对应一个块对象,而v-for则是每个子元素都对应一个块对象。
在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢?
当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!