Vue3 uses a new way of responding to ES6 Proxy objects and also responds to ES6’s new data type: array collections. (Vue2 does not respond to array collections.)

Reactive API source code address is vue-next3.2\packages\reactivity\ SRC \reactive

export function reactive(target: object) {
  // Return the read-only proxy object if the target object is already a read-only proxy
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}
Copy the code

In order to process shallowReactive ReadOnly (shallowReadonly) in parallel with other shallowReadonly apis, there is a createReactiveObject creation function that takes five parameters

  • targetThe target object for reactive processing
  • isReadonlyRead-only or not
  • baseHandlerIntercepting processing methods for ordinary data (except for ES6’s new array collection)
  • collectionHandlerES6 new array collection intercepts handling methods
  • proxyMapStore the corresponding response object to prevent repeated calls later
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
    Reactive does not respond to underlying data types
  if(! isObject(target)) {if (__DEV__) {
      console.warn(`value cannot be made reactive: The ${String(target)}`)}return target
  }
  
  // Return if the target has been processed in response
  if( target[ReactiveFlags.RAW] && ! (isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) {return target
  }
  
  // Check if there is a response object for this object
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  Int toString (); /* Int toString (); /* Int toString (); Number, string, etc.) may be array collections or objects such as object arrays using different intercepting methods */
  // targetType. INVALID Returns an INVALID object directly
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  // targetType. COLLECTION array identifies the COLLECTION
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // Store a responsive object and return the corresponding object
  proxyMap.set(target, proxy)
  return proxy
}
Copy the code

Compared to Vue2, Vue3 does not need to process the target object from scratch all at once. Instead, Vue3 processes the outermost object first, using lazy loading. When the user obtains a value in the object, the value is processed and returned

Finally, the above is my personal understanding if there is no place to say, please add