BlingSu
commented
3 years ago Repository (仓库地址)：https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/reactive.ts Gain (收获) : 响应式是独立渲染和编译，可以单独使用这个包来做状态管理，简单了解
首先看看响应式目录是做什么的
packages/reactivity/src
|--- baseHandlers.ts proxy handler，针对 Array，Object常规对象处理的handler
|--- collectionHandlers.ts 同上，只不过针对于 Set, Map, WeakMap, WeakSet 集合数据
|--- computed.ts 计算...
|--- effect.ts 依赖手机和数据响应的处理
|--- index.ts 入口 导出API
|--- lock.ts 锁，大概就是控制 readonly响应变量的 set 和 delete 操作吧
|--- operations.ts 数据类型的枚举
|--- reactive.ts 响应式入口，针对对象
|--- ref.ts 响应式入口，针对基本类型稍微熟悉的认都知道，其实响应式系统主要是包括4个关键的API，如下
- reactive：关键入口API，可以理解成vue2中的data
- ref：和reactive是一样的，不过是用在对于基本数据类型的响应式包装，因为基本数据类型有时候是会丢失引用
- computed：计算API，同vue2
- effect：说白了就是watcher，依赖收集用的，computed和watch API都是基于effect的
reactive核心入口
源码里面有很多依赖：
// isObject判断对象， toTypeString获取数据类型
import { isObject, toTypeString } from './@vue/shared'
/**
proxy 的handlers
mutableHandlers：可变数据的 handler
reaonlyHandlers：只读数据的 handler
*/
import { mutableHandlers, readonlyHanlders } from './baseHandlers'
// 可变数据集合 和 只读数据集合
import { mutableCollectionHandlers, readonlyCollectionHanlders } from './collectionHanlders'
// effect 泛型类型
import { ReactiveEffect } from './effect'
// ref 泛型类型
import { UnwrapRef, Ref } from './ref'
// 把Stringn转成Map 返回 fn 来判定是否这个Map上面包含所有的key
import { makeMap } from '@vue/shared'上面可以看到重点依赖项就是一堆的 handler，其他都是一些工具方法或者泛型类型，可以先看看 reactive的 方法和类型
// 依赖集合类型
export type Dep = Set<ReactiveEffect>
/**
key 和 Dep集合的对应关系集合
key就是 响应式的key dep就是哪些地方用到了这个key
假设 const a = { b: 1 } 如果两个地方用到了 a.b
那么key就是 b ，dep就是两次的依赖集合
*/
export type KeyToDepMap = Map<string | symbol, Dep>
// 观察者是否被发现
const canObserve = (value: any): boolean
// 解ref类型
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>
// 响应式入口方法 入参数是 T 继承 对象，返回上面的 解ref类型
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
// 和 上面一样，但是返回是 只读
export function readonly<T extends object>(
target: T
): Readonly<UnwrapNestedRefs<T>>
// 创建响应式对象关键方法， reactive和only都调用这玩意儿
function createReactiveObject(
target: any,
toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>,
baseHandlers: ProxyHandler<any>,
collectionHandlers: Proxyhandler<any>
): any
// 是否响应式数据
export function isReactive(value: any): boolean
// 只读？
export function isReadonly(value: any): boolean
// 响应式转化成原始数据
export function toRaw<T>(observed: T): T
// 把value标记成 readonly， 在reactive里面判断是否是 只读 的原始数据
export function markReadonly<T>(value: T): T
// 把value标记成 不可响应数据 ，会影响到 canobserve 方法
export function markNonReactive<T>(value: T): T上面代码可能会产生疑惑，比如
- 如何判断是否只读的响应式数据？如何在上面加一个标记？还是说用一个对象来存储响应式数据
- 如何把响应式数据转化成原始数据？proxy数据咋转成object？
- 来看看下面几个变量的定义
/** 这其实就是target 和 ketToDepMap 映射集合 说白= 多个target 每个target上有多个key，每个key有多个依赖，存到weakmap里面就是为了减少内存开销 毕竟map很好用。。 */ export const targetMap = new WeakMap<any, KeyToDepMap>()
/* 这里无非就是 原始数据 -> 响应式数据 响应式数据 -> 原始数据 原始数据 -> 只读响应式数据 只读响应式数据 -> 原始数据 / const rawToReactive = new WeakMap<any, any>() const reactiveToRaw = new WeakMap<any, any>() const rawToReadonly = new WeakMap<any, any>() const readonlyToRow = new WeakMap<any, any>()
/*
markReadonly 和 markNonReactive
用来存储标记的特定数据，这样可以在创建响应式数据时来检测有没有被这两个方法标记过！
/
const readonlyValues = new WeakSet
/*
判断是否是集合类型 ，比如 map set weakmap weakset...
注意集合类型的proxy hanlder 和 普通对象是不一样的
/
const isObserveTypes = new Set[object ${t}])
.join(',')
)
所以说用 `readonlyToRow` 来存储只读响应式数据，比如
```js
export function isReadonly(value: any): boolean {
return readonlyToRow.has(value)
}用 reactiveToRaw 和 readonlyToRow 来存储 响应式数据 -> 原始数据的映射关系，接着获取
export function toRaw<T>(observed: T): T {
return reactiveToRaw.get(observed) || readonlyToRaw.get(observed) || observed
}总体而言就是利用各种集合来存储原始数据和响应式数据的映射，这样可以根据这映射关系快速拿到对应的数据。
然后我们看看 canObserve 这里来看看那些数据是可以观测的？
const canObserve = (value: any): boolean => {
return (
!value._isValue && // 实例不可观察
!value._isVNode && // vdom 不可以
isObservableType(toTypeString(value)) && // 上面那方法6个不行
!nonReactiveValues.has(value) //标记不可响应的不行
)
}重点 reactive 和 readonly 核心方法实现
// 返回值就是解 Ref 类型
export function reactive(target: object) {
if (readonlyToRaw.has(target)) return target //如果是一个只读的响应式数据直接返回
if (readonlyValues.has(target)) return readonly(target) // 如果被标记了只读，直接调用readonly返回
// 创建响应式
return createReactiveObject(
target, // 原始数据
rawToReactive, // 原始数据 -> 响应式
reactiveToRaw, // 反过来
mutableHandlers,// 可变数据的proxyhandle
mutableCollectionHandlers // 可变数据结合的proxyhandle
)
export function readonly<T extends object>(
target: T
): Readonly<UnWrapNestedRefs<T>> {
if (reactiveToRaw.has(target)) {
// 响应数据获取原始数据观察
target = reactiveToRaw.get(target)
}
return createReactiveObject(
target, // 原始数据
rawToReadonly, // raw -> readonly observed
readonlyToRaw, // readonly ovserved -> raw
readonlyHandlers, // 只读数据的 proxy handler
readonlyCollectionHandlers // 只读集合数据 proxy handle
)
}
}这里可以看出vue3的核心方法也很简单，逻辑一样，主要是通过对原始数据的检查和转换，核心实现的逻辑其实就在createReactiveObject里面
function createReactiveObject(
target: any, // 原始数据
toProxy: WeakMap<any, any>, // raw -> readyonly
toRaw: WeakMap<any, any>, // readonly observed -> raw
baseHadnlers: ProxyHandler<any>, // 只读 ｜ 可变 数据proxy handler
collectionHandlers: ProxyHandler<any> // 只读 ｜ 可变 集合 数据handler
) {
// 如果不是对象 返回自身， 包括 null， reactive(null)
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
// 原始数据如果被观察过，直接raw转observed的映射 ，返回响应式
let observed = toProxy.get(target)
if (observed !== void 0) return observed
// 自身原是响应式 直接返回
if (toRaw.has(target)) return target
// 不可观察返回
if (!canObserved(target)) return target
// 判断基础数据（object｜array） handler 还是集合数据handler
const hanlders = collectionTypes.has(target.constructor)
? collectionHandlers
: baseHandlers
// proxy 创建代理对象，也就是响应式对象
observed = new Proxy(target, handlers)
// 创建后 设置好 raw 和 obsrved 的双向映射关系
toProxy.set(target, observed)
toRaw.set(observed, target)
// targetMap就是上面所说的创建默认依赖追踪集合
if (!targetMap.has(target)) {
targetMap.set(target, new Map())
}
return observed
}- 现在看感觉
reactive和readonly的区别：映射关系存储集合不同 和 proxy handler不同 - object array 和集合类型 set map weakset weakmap 的proxy handlers 不同
所以这里可以看看baseHanlder中的代码，首先看依赖
import { reactive, readonly, toRaw } from './reactive'
import { OperationTypes } from './operations' // 操作类型枚举，对于proxy handlers的trap方法
import { track, trigger } from './effect' // 依赖收集和触发依赖回调
import { LOCKED } from './lock' // 锁 用来禁止set和delete
import { isObject, hasOwn, isSymbol } from '@vue/shared' // 判断类型的工具包？
import { isRef } from './ref'这里 LOCKED的作用是啥？？？ 猜可能是在组件 mount 和 update 的时候会对组件的 props的代理进行修改，因为我们都知道单向数据流中，子组件内部是不能更改 props 的，但是子组件更新，进行 vnode patch 后需要更新子组件的 props，包括一些动态 props，咱来看看变量和方法概览：
// js内部语言行为描述符集合 比如 symbol.iterator这些
const builtInSymbols = new Set(
Object.getOwnPropertyNames(Symbol)
.map(key => (Symbol as any)[key])
.filter(isSymbol)
)
function createGetter(isReadonly: boolean) {}
function set(
target: any,
key: string | symbol,
value: any,
receiver: any
): boolean
function deleteProperty(target: any, key: string | symbol): boolean
function has(target: any, key: string | symbol): boolean
function ownKeys(target: any): (string | number | symbol)[]
export const mutableHandlers: ProxyHandler<any> = {
get: createGetter(false),
set,
deleteProperty,
has,
ownKeys
}
export const readonlyHandlers: ProxyHandler<any> = {
get: createGetter(true),
set(target: any, key: string | symbol, value: any, receiver: any): boolean {
if (LOCKED) {
if (__DEV__) {
console.warn(
`Set operation on key "${String(key)}" failed: target is readonly.`,
target
)
}
return true
} else {
return set(target, key, value, receiver)
}
},
deleteProperty(target: any, key: string | symbol): boolean {
if (LOCKED) {
if (__DEV__) {
console.warn(
`Delete operation on key "${String(
key
)}" failed: target is readonly.`,
target
)
}
return true
} else {
return deleteProperty(target, key)
}
},
has,
ownKeys
}可以看到，mutableHandlers 和 readonlyHandlers 都是定义了 5 个 trap 方法：get、set、deleteProperty、has、ownKeys，前 3 个不用多家介绍，has trap 针对与 in 操作符，而 ownKeys 针对于 for in 和 Object.keys 这些遍历操作的，而 readonlyHandlers 相比于 mutableHandlers 其实只是在 get、set 和 deleteProperty 这三个 trap 方法里有区别，而对于可能改变数据的 set 和 deleteProperty 方法，则是利用 LOCKED 来锁定，不让修改数据，这个变量我在上面也提了一下。
- 我们这来看下每个trap的方法
get
// 创建get trap 方法 如果可变 isReadonly 是false 只读的就是true啦
function createGetter(isReadonly: boolean) {
return function get(
target: any,
key: string | symbol,
receiver: any
) {
// 通过 Reflect 反射来获取原始值
const res = Reflect.get(target, key, receiver)
// 如果js内置方法，不依赖收集
if (isSymbol(key) && builtInSymbols.has(key)) return res
// 如果是ref数据类型，返回value，可以这么档次ref(target) 其实在 get set value的时候就收集了，所以没必要重复收集
if (isRef(res)) return res.value
// get 类型操作的依赖收集
track(target, OperationTypes.GET, key)
// 返回响应式。。
return isObject(res)
? isReadonly
? readonly(res)
: reactive(res)
: res
}
}这里用Reflect.get，为什么而不用 target[key]返回？ 举个例子
const target = {
val: 1,
get v () {
return this.val
}
}
const observed = reactive(target)此时，如果不用 Reflect.get，而是 target[key]，那么 this.foo 中的 this 就指向的是 target，而不是 observed，此时 this.foo 就不能收集到 foo 的依赖了，如果 observed.foo = 20 改变了 foo 的值，那么是无法触发依赖回调的，所以需要利用 Reflect.get 将 getter 里的 this 指向代理对象。因为这里的第三个参数recevier就是如果target对象中指定了getter，receiver则为getter调用时的this值！哈哈
还有跟题为什么在结尾 return 的时候还要调用 reactive 或者 readoonly 呢？
因为 proxy的特性就是 只能代理一层，对于嵌套的深层对象，如果不按源码中的方法，那就需要一层层递归来代理劫持对象，即每次递归都判断是否是对象，如果是对象，那么再调用 reactive 来响应式化，js中也很蛋疼，有循环引用的问题，说白了如果一直递归调用 reactive，爆栈就gg了，所以这里要做一些判断如果是toproxy存在不递归不就ok了。所以说相比之下初始化递归劫持，延迟访问劫持的方式更能提升初始化性能，也可以做更细的控制，比如接口数据嵌套深的话，不就很舒服了吗。
- 关于set 源码看起来很easy
// set trap 方法 function set( target: any, key: string | symbol, value: any, receiver: any ): boolean { // 如果是观察过响应式数据，那么获取它映射的原始数据 value = toRaw(value) // 获取旧值 const oldValue = target[key] // 如果旧值是 ref 类型数据，而新的值不是 ref，那么直接赋值给 oldValue.value // 因为 ref 数据在 set value 的时候就已经 trigger 依赖了，所以直接 return 就行 if (isRef(oldValue) && !isRef(value)) { oldValue.value = value return true } // 对象上是否有这个 key，有则是 set，无则是 add const hadKey = hasOwn(target, key) // 利用 Reflect 来执行 set 操作 const result = Reflect.set(target, key, value, receiver) // 如果 target 原型链上的数据，那么就不触发依赖回调 if (target === toRaw(receiver)) { if (__DEV__) { // 开发环境操作，只比正式环境多了个 extraInfo 的调试信息 const extraInfo = { oldValue, newValue: value } if (!hadKey) { trigger(target, OperationTypes.ADD, key, extraInfo) } else if (value !== oldValue) { trigger(target, OperationTypes.SET, key, extraInfo) } } else { // 上面讲过，有这个 key 则是 set，无则是 add if (!hadKey) { trigger(target, OperationTypes.ADD, key) } else if (value !== oldValue) { // 只有当 value 改变的时候才触发 trigger(target, OperationTypes.SET, key) } } } return result }为什么这里会 target === toRaw(receiver) ？？举个例子！
const child = { name : 'child' }
const parent = new Proxy({ name: 'parent' }, {
set (target, key, value, receiver) {
console.log(target, receiver)
return Reflect.set(target, key, value, receiver)
}
})
Object.setPrototypeOf(child, parent)
child.haha = 1
// 结果 { name: 'parent'} { name: 'child'}仔细看 child的原型链是一个 proxy， child在设置值的时候，本身不包含key。
当满足上面两个条件的时候，设置 child 的值，会触发原型链上的 set trap 方法，并且 target 是原型链数据，而 receiver 则是真实数据所以，源码中的那个条件逻辑也就不难看懂了，当满足上述两个条件时，我们当然不希望触发 parent 的 set trap 咯
像数组的 unshift，splice 这些操作是如何触发 set trap方法的呢？其实就是把数组的每一项依次都往后移动一位，然后再把首位设置成 0
- 剩下的delteproperty has ownKeys就太简单了。不看！
这里可以大概知道以上是做什么的把
-
basehandler是针对数组和对象类型的数据的 proxy handler
-
每个 trap 方法都是用 Reflect 来反射到原始数据上的
-
对于 get has 和 ownKeys 这一类读操作，会进行 track 来收集依赖，而对于 set 和 deleteProperty 这类写操作，则是会进行 trigger 来触发依赖回调
-
响应式的读取是延迟的！就是上面说的不一开始就递归😁
-
collectionHandler是用来专门处理那几个map set weakmap weakset集合数据类型的
总结一下
- reactive 是利用proxy 来进行数据观察， Reflect 相关操作来反射到原始数据，并且数据的访问是一个 延迟观察 的方式！
- 普通对象、数组和集合类型数据的代理handler 是不一样的哦，因为proxy是有限制的。不懂看es6 0.0
- 利用几个 WeakMap 来 存储原数据 和 响应式数据的双向映射关系，这样非常方便在响应式入口方法里判断是否原始数据已经被观察过了，比vue2里面挂在 ob 要少一些没用的数据，并且 WeakMap的GC不错 ！
-
下次再ref computed effect以及流程
scorpioLh
AzTea
wenfeihuazha
webfansplz
diandiantong
rxyshww
Share your knowledge and repository sources from Github . ♥️
2020/10/26 - 2020/10/30 ～