Summary of the package

Reactive is embedded in vue’s renderer (@vue/ Runtime-dom) and can be used separately.

The file structure of reactive is shown below, ignoring the _tests_ test file and some configuration and specification files. The useful code is in SRC and index.js:

. ├ ─ ─ __tests__// Unit test directory├─ index.js ├─ SRC ├─ finger gestures// Basic type of processor├ ─ ─ collectionHandlers. TsWeakSet WeakSet Specifies the WeakSet WeckMap processor├ ─ ─ computed. Ts// computed API├ ─ ─ effect. Ts// effect trigger track├ ─ ─ operations. Ts// Type definition of trigger\track├ ─ ─ reactive. Ts// reactives API└ ─ ─ ref. Ts// ref API 
Copy the code

Consistents

Target

Target defines a reactive proxy object type (with optional signatures for all type identification attributes) :

 export interfaceTarget { [ReactiveFlags.SKIP]? :boolean[ReactiveFlags.IS_REACTIVE]? :boolean[ReactiveFlags.IS_READONLY]? :boolean[ReactiveFlags.RAW]? :any
 }
Copy the code

ReactiveFlags

ReactiveFlags Specifies the types of reactive proxies:

  • IS_REACTIVE 和 IS_READONLYThe easier to understand are the reactive proxy type and the read-only reactive proxy type.
  • SKIPMore special, inmarkRawIs used to annotate against reactive proxies.
  • RAW:rawA pointer to a proxied object.
 export const enum ReactiveFlags {
   IS_REACTIVE = '__v_isReactive',
   IS_READONLY = '__v_isReadonly',
   SKIP = '__v_skip',
   RAW = '__v_raw'
 }
Copy the code

TargetType

The processing policy used to identify the proxied object that should be removed:

 const enum TargetType {
   INVALID = 0,
   COMMON = 1,
   COLLECTION = 2
 }
Copy the code

getTargetType

If the object to be proxied has SKIP or is set to a base extension object, then TargetType is INVALID.

  • Object|Array: Both of these are base typesobject, is the ordinary proachable object —COMMON;
  • Map|Set|WeakSet|WeakMapThese four are special collection types that require additional operations to add agents —COLLECTION;
  • other like primitive: All other types are illegal types —INVALID;
 function getTargetType(value: Target) {
   return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
     ? TargetType.INVALID
     : targetTypeMap(toRawType(value))
 }
 ​
 function targetTypeMap(rawType: string) {
   switch (rawType) {
     case 'Object':
     case 'Array':
       return TargetType.COMMON
     case 'Map':
     case 'Set':
     case 'WeakMap':
     case 'WeakSet':
       return TargetType.COLLECTION
     default:
       return TargetType.INVALID
   }
 }
Copy the code

TargetMaps

WeakMap stores a target-to-proxy mapping instead of a Target-to-depmap mapping: weakMap stores a target-to-proxy mapping instead of a Target-to-depmap mapping:

 export const reactiveMap = new WeakMap<Target, any> ()export const shallowReactiveMap = new WeakMap<Target, any> ()export const readonlyMap = new WeakMap<Target, any> ()export const shallowReadonlyMap = new WeakMap<Target, any> ()Copy the code