preface

Setting methods are a little more complicated than getting, and there are a number of cases that I’ll explain in detail below

createSetter

The first step

Let’s expand the tool method for later use

We have to distinguish between new and modified, because it could be arrays, so we have to think about arrays

  • Get old value, if there is old value, that is modified logic, if not, that is new
  • Check whether the current key is an array and an integer key. If both are true, compare the current key to target.length. If not, check whether the current key is an attribute of target

  • If hadKey is false, the result is new
  • If the result hadKey is true, it indicates that it is modified, then the old value and the new value are the same

The second step

Now I’m going to add operators to add and modify

New trigger update, the core method is to call trigger method, parameters for the new target object, operation type, new attributes, new value

The update triggered by modification is similar to the new one, passing an old value.

The third step

We will now write the trigger method in the effect.ts file

The first step is to determine that if this property has not collected effects, no action is required

Then the core idea was to store all the effects to be executed in a new set and execute them together

  • Let’s see if we’re changing the length of the array, because we’re changing the length of the array
  • Then loop through all dependencies and determine if the current key is length or if the changed length is less than the collected index, then the index page needs to effect again
  • If the conditions are met, the current DEP is collected

  • In other cases, you’re not modifying an array, you’re probably modifying an object
    • If the key is not undefined, the key exists, so we take the key out and throw it directly into the dependency array to be updated
    • If you change an index in the array, say arr[100] =1. We use type to create a new index. If an index is added, the length will be updated, and the length must be collected

Finally, let all the collected dependencies that need to be updated be executed

Trigger is used to find the effect corresponding to the property and make it execute. There are some special treatments, kind of like when you write something and suddenly you find it can’t run, you do something special to it.

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 ~