• Reactive can program an object to be reactive, no matter how many layers there are
  • ShallowReactive can program an object responsively, just at the first layer
  • The readonly property cannot be changed, it can only be read, no matter how many layers
  • ShallowReadonly is readable and only for the first layer

Core method

The first step:

Note:

  • Different functions are implemented according to different parameters, and basic functions are provided for Reactive, shallowReactive, Readonly, and shallowReadonly. These four apis implement their respective functions through different parameters
  • The first parameter is the target, read only, handlers for each method

The second step:

Write a method to determine if it’s an object, because target can’t intercept if it’s not an object, and Reactive is an API that only intercepts object types

Return target itself if target is not an object

The third step

Determine whether the object has already been proxied. If an object has already been proxied, do not proxied again and return the result of the last proxied

There is a problem that an object may be deeply proxied and read – only proxied at the same time.

Create two Spaces to cache one pure response and one read-only

The fourth step

Use proxy to complete proxy work, proxy after the object and the corresponding proxy cache

And then the next time you go in and look it up in the cache, if it’s in the cache, take it out and go back out

Step 5

Take the handlers out of the four apis

Create a new file basehandlers.ts

Step 6

Write the four basic handlers get methods – createGetter

Read-only sets do not have a set method, so an error is reported

Step 7

I’m going to write a merge method to separate these two read-only GET methods and merge them into their handlers

Step 8

Write the set method specifically for the two apis that are pure responses

And then put them into their handlers

\

Step 9

Now that the basic framework of the above steps is ready, you just need to write the basic methods of GET and set

CreateGetter:

The first parameter is the proxy source object, the property name, and the proxy object itself

Value and return

The same goes for Settings

\

The Reflect method is introduced:

  • Es6 grammar
  • Subsequent methods on Object will be migrated to Reflect
  • Setting a value at target[key] = value may fail because some attributes may be read-only, in which case no exception is raised and no value is returned. Reflect returns a Boolean that reflects has a return value

Step 10

CreateGetter method in

  • If it is not read only, collect dependencies and update corresponding views after data changes
  • Determine if it is shallow and return directly
  • If the RES is an object, consider whether it is read-only and treat it as read-only; otherwise, treat it as responsive

Note: this is different from vue2, vue2 is recursive from the beginning, vue3 is the proxy when the value, vue3 proxy mode is lazy

If you feel that you have gained something, please use your little hands to save, thank you! How to predict the future, and listen to the next time to break down ~