Vue3 源码 | 深入理解响应式系统上篇 -reactive

// 直接使用vue3库import { reactive, effect } from 'vue3.js'
const obj = reactive({ x: 1 })
effect(() => {  patch()})
setTimeout(() => {  obj.x = 2}, 1000)
function patch() {  document.body.innerText = obj.x}

// 安装依赖yarn install // 执行此命令开启构建，构建完成，会在reactivity包下生成dist目录，里面是reactivity.glob.js文件// 该文件暴露了全局的VueReactivity对象，里面集成了包暴露的所有方法以及配置对象// ps:为了方便查看targetMap是什么，我自个新增了该对象的暴露yarn dev reactivity 

// VueReactivity 是 reactivity目录单独构建暴露的全局变量const { effect, track, trigger, targetMap } = VueReactivityvar obj = {  x: 1}
effect(() => {  patch();  // 这里 track 只能放在effect里面，track需要使用effect内的activeEffect  track(obj, 'get', 'x');  console.log(targetMap, 'targetMap')})
setTimeout(() => {  obj.x = 2;  trigger(obj, 'set', 'x')}, 1000)
function patch() {  document.body.innerText = obj.x}

// 枚举了一些响应式对象的类型标识，不同类型采用不同的劫持方式export const enum ReactiveFlags {  // 标志SKIP，则此对像永远不会被转为代理  SKIP = '__v_skip',    // 是reactive处理的代理对象  IS_REACTIVE = '__v_isReactive',  // 只读代理  IS_READONLY = '__v_isReadonly',  // 原始对象  RAW = '__v_raw',  REACTIVE = '__v_reactive',  READONLY = '__v_readonly'}// 对外暴露的创建响应式对象的APIexport function reactive(target: object) {  // 如果是只读代理，则直接返回  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {    return target  }  // 创建响应式对象  return createReactiveObject(    target,    false,    mutableHandlers,    mutableCollectionHandlers  )}// 只读代理，这里不过多解读export function readonly<T extends object>(  target: T): DeepReadonly<UnwrapNestedRefs<T>> {  return createReactiveObject(    target,    true,    readonlyHandlers,    readonlyCollectionHandlers  )}

/** 返回对象是否可以观察：* 1. 标志了SKIP状态的对象，用于不会被转换为代理，对应API是,markRaw* 2. 对象类型属于其中一种:Object,Array,Map,Set,WeakMap,WeakSet* 3. 对象非冻结，冻结的对象无法被修改的*/const canObserve = (value: Target): boolean => {  return (    !value[ReactiveFlags.SKIP] &&    isObservableType(toRawType(value)) &&    !Object.isFrozen(value)  )}
// 这里会根据不同的参数创建不同类型的代理function createReactiveObject(  target: Target,  isReadonly: boolean,  baseHandlers: ProxyHandler<any>,  collectionHandlers: ProxyHandler<any>) {  // 非对象不能返回，不能进行代理劫持，直接返回  if (!isObject(target)) {    return target  }
  // 已经是代理，直接返回，不能重复劫持  if (    target[ReactiveFlags.RAW] &&     !(isReadonly && target[ReactiveFlags.IS_REACTIVE])  ) {    return target  }  // 已经具有相应的代理[reactive/readonly]，则返回  const reactiveFlag = isReadonly    ? ReactiveFlags.READONLY    : ReactiveFlags.REACTIVE  if (hasOwn(target, reactiveFlag)) {    return target[reactiveFlag]  }
  // 判断目标是否可进行代理劫持  if (!canObserve(target)) {    return target  }  // 目标对象设置代理  const observed = new Proxy(    target,    // 如果是Set, Map, WeakMap, WeakSet集合数据类型，走collectionHandlers    // 基础数据类型Object/Array 走 baseHandlers    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers  )  def(target, reactiveFlag, observed)  // 返回代理对象  return observed}

interface ProxyHandler<T extends object> {    getPrototypeOf? (target: T): object | null;    setPrototypeOf? (target: T, v: any): boolean;    isExtensible? (target: T): boolean;    preventExtensions? (target: T): boolean;    getOwnPropertyDescriptor? (target: T, p: PropertyKey): PropertyDescriptor | undefined;    has? (target: T, p: PropertyKey): boolean;    get? (target: T, p: PropertyKey, receiver: any): any;    set? (target: T, p: PropertyKey, value: any, receiver: any): boolean;    deleteProperty? (target: T, p: PropertyKey): boolean;    defineProperty? (target: T, p: PropertyKey, attributes: PropertyDescriptor): boolean;    ownKeys? (target: T): PropertyKey[];    apply? (target: T, thisArg: any, argArray?: any): any;    construct? (target: T, argArray: any, newTarget?: any): object;}

const set = /*#__PURE__*/ createSetter()const get = /*#__PURE__*/ createGetter()
// 劫持的处理程序export const mutableHandlers: ProxyHandler<object> = {  get,  set,  deleteProperty,  has,  ownKeys}
// 主要用于追踪收集数据变化，并放入到targetMapfunction createGetter(isReadonly = false, shallow = false) {  return function get(target: object, 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          ? (target as any)[ReactiveFlags.READONLY]          : (target as any)[ReactiveFlags.REACTIVE])    ) {      return target    }		    // 数组相关处理    const targetIsArray = isArray(target)    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {      return Reflect.get(arrayInstrumentations, key, receiver)    }		// 通过反射获取对象的默认行为（属于语言内部的方法），不管Proxy怎么改都没用    const res = Reflect.get(target, key, receiver)		    // key是Symbol类型，原型链，或者是Ref引用类型标志，则返回，不追踪    if (      isSymbol(key)        ? builtInSymbols.has(key)        : key === `__proto__` || key === `__v_isRef`    ) {      return res    }		// 追踪属性变化，这里会放入到targetMap,在effect文件里面声明的存储追踪数据的weakMap变化    if (!isReadonly) {      track(target, TrackOpTypes.GET, key)    }    // 浅层代理(如，shallowReactive)，不做递归，并且ref引用没有做拆包，因为直接return。    if (shallow) {      return res    }		    // 引用对象，如果是数组，则返回数组，如果是对象，则返回值。    // 非浅层代理(reactive)，则做了ref的拆包     if (isRef(res)) {      return targetIsArray ? res : res.value    }		// 如果是对象，则递归进行响应式处理    if (isObject(res)) {      return isReadonly ? readonly(res) : reactive(res)    }
    return res  }}
// 用于触发依赖,从targetMap获取存在数据，执行对应的effectfunction createSetter(shallow = false) {  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的处理      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {        oldValue.value = value        return true      }    } else {      // 在浅层模式下，不管是否响应式，对象都按原样设置    }
    const hadKey = hasOwn(target, key)    const result = Reflect.set(target, key, value, receiver)    // 如果目标是原型链中的某个东西，就不要触发    if (target === toRaw(receiver)) {      // 根据key是否存在，去触发对应的操作      if (!hadKey) {        trigger(target, TriggerOpTypes.ADD, key, value)      } else if (hasChanged(value, oldValue)) {        trigger(target, TriggerOpTypes.SET, key, value, oldValue)      }    }    return result  }}

export function shallowReactive<T extends object>(target: T): T {  return createReactiveObject(    target,    false,    shallowReactiveHandlers,    shallowCollectionHandlers  )}
// 第二个参数，表示的是是否采用浅层shallow模式，// shallow=true，任务属性ref都不会自动解包，具体看代码const shallowGet = /*#__PURE__*/ createGetter(false, true)// 第一个参数，表示的是是否采用浅层shallow模式，const shallowSet = /*#__PURE__*/ createSetter(true)

const state = shallowReactive({  foo: 1,  nested: {    bar: 2  }})
// mutating state's own properties is reactivestate.foo++// ...but does not convert nested objectsisReactive(state.nested) // falsestate.nested.bar++ // non-reactive

const state = shallowReadonly({  foo: 1,  nested: {    bar: 2  }})
// mutating state's own properties will failstate.foo++// ...but works on nested objectsisReadonly(state.nested) // falsestate.nested.bar++ // works

// 检测对象是否是由reactive创建的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)}// 返回reactive或readonly代理的原始对象export function toRaw<T>(observed: T): T {  return (    (observed && toRaw((observed as Target)[ReactiveFlags.RAW])) || observed  )}// 标记一个对象，使其永远不会转换为代理export function markRaw<T extends object>(value: T): T {  def(value, ReactiveFlags.SKIP, true)  return value}

const reactive = (target){	 // 代理数据  return new Proxy(target, {    get(target, prop) {      // 执行追踪，数据放入targetMap      track(target, prop);      return Reflect.get(target, prop);    },    set(target, prop, newVal) {      Reflect.set(target, prop, newVal);      // 触发effect      trigger(target, prop);      return true;    }  })}