# Target类型及属性 ``` // 定义target属性 interface Target { // 标记为原始数据，则不能进行监控，只能为原始数据 [ReactiveFlags.SKIP]?: boolean // 是否是可读可写响应式 [ReactiveFlags.IS_REACTIVE]?: boolean // 是否为只读响应式 [ReactiveFlags.IS_READONLY]?: boolean // 指向原始数据 [ReactiveFlags.RAW]?: any } // 判断是否为可读可写响应式 export function isReactive(value: unknown): boolean { if (isReadonly(value)) { // 如果是可读的的，以原始数据进行判断 return isReactive((value as Target)[ReactiveFlags.RAW]) } return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE]) } // 判断是否为只读响应式 export function isReadonly(value: unknown): boolean { return !!(value && (value as Target)[ReactiveFlags.IS_READONLY]) } // 判断是否为代理数据 export function isProxy(value: unknown): boolean { return isReactive(value) || isReadonly(value) } // 通过RAW属性进行获取原始数据，如果原始数据不存在直接返回监控数据 export function toRaw<T>(observed: T): T { return ( (observed && toRaw((observed as Target)[ReactiveFlags.RAW])) || observed ) } ``` # reactive源码 ``` export function reactive(target: object) { // 如果对象为Readonly，则不能创建Reactive，直接返回 if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers ) } ``` * Reactive: 可读可写的响应式数据结构,调用createReactiveObject, 传入第二个参数为false * Readonly: 只读的响应式数据结构, 调用createReactiveObject, 传入第二个参数为true ``` 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 // target[ReactiveFlags.RAW]指target为响应式 // 如果是响应式则直接返回 // 但是如果是创建Readonly类型数据，但是target是Reactive则需要重新创建 if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target } // target already has corresponding Proxy const proxyMap = isReadonly ? readonlyMap : reactiveMap const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy } // 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 } ```