This article will show you how to use Vue 3.0 responsive

We know that Vue 2.0 uses Ojbect.defineProperty to hijack the reading and modification of existing property values ​​of an object, but this API cannot monitor the addition and deletion of object properties. In addition, in order to deeply hijack the internal properties of an object, it is necessary to recursively call Ojbect.defineProperty on the internal properties during initialization, which causes a performance consumption. To solve these problems, Vue 3.0 rewrote the responsive logic using Proxy and optimized related performance.

Use Cases

Let's take a look at an example of how to write a responsive API in Vue 3.0 :

changePerson can change the value of the responsive data person . Changes in person value will trigger component re-rendering and update the DOM .

Here we can see that in the use of Vue 3.0 , developers use reactive functions to determine which data is responsive data, thus avoiding some unnecessary responsive performance consumption. For example, in this case we don't need to make nowIndex responsive data. (Of course, Vue 2.0 can also define data outside the data function, which is also non-responsive data)

Next, let’s take a look at the implementation principle of reactive functions!

Reactive API related processes

reactive

Code Description:

• 1. If the target object target is a readonly object, return the target object directly, because the readonly object cannot be set as a responsive object
• 2. Call createReactiveObject function to continue the process.
  

createReactiveObject creates a responsive object

Code Description:

• 1. If the target object is not data or an object, the object is returned directly and an error warning prompt is given in the development environment.
• 2. If target is already a Proxy object, it returns target, (target['__v_raw'] is very cleverly designed: if target is a Proxy object, target['__v_raw'] triggers the get method and searches the cache object reactiveMap to see whether the Proxy object of target object is equal to target itself). An exception is handled here. If the readonly function is executed on a responsive object, you need to continue.
• 3. Check whether there is a corresponding Proxy object in reactiveMap , and return the corresponding Proxy object directly.
• 4. Make sure only specific data can be made responsive, otherwise just return target . The responsive whitelist looks like this:

1. target has not been marked by markRaw method, or target object has no __v_skip attribute value or the value of __v_skip attribute is false ;

2. target cannot be a non-extensible object, that is, target has not been executed with preventExtensions , seal and freeze methods;

3. target is Object or Array ;

4. target is Map , Set , WeakMap , WeakSet ;

• 5. By using Proxy function to hijack target object, the returned result is a responsive object. The processing function here will be different depending on target object (both functions are passed in as parameters):

1. The processing function of Object or Array is collectionHandlers ;

2. The processing function of Map , Set , WeakMap , WeakSet is baseHandlers ;

• 6. Store the responsive object in reactiveMap for cache, key is target and value is proxy .

mutableHandlers processing function

We know that accessing object properties will trigger the get function, setting object properties will trigger the set function, deleting object properties will trigger the deleteProperty function, the in operator will trigger the has function, and getOwnPropertyNames will trigger the ownKeys function. Next, let's take a look at the code logic of these functions.

get function

Since no parameters are passed, isReadonly and shallow are both false by default.

Code logic :

• 1. If the __v_isReactive attribute is obtained and true is returned, it means that the target is already a responsive object;
• 2. Get the __v_isReadonly attribute and return false; (readonly is another responsive API, which will not be explained for now)
• 3. Get the __v_raw attribute and return the target itself. This attribute is used to determine whether the target is already a responsive object;
• 4. If the target is an array and hits some attributes, such as includes, indexOf, lastIndexOf, etc., these function methods of the array are executed, and the collection dependency track ( arr , TrackOpTypes.GET , i + '') is executed for each element of the array, and then the value of the array function is obtained through Reflect;
• 5.Reflect evaluation;
• 6. Determine whether it is a special attribute value: symbol , __proto__ , __v_isRef , __isVu e. If it is directly returned to the previously obtained res, no subsequent processing is performed;
• 7.Execute collection dependencies;
• 8. If it is ref, if target is not an array or key is not an integer, data unpacking is performed. This involves another responsive API ref, which will not be explained for now;
• 9. If res is an object, recursively execute reactive to turn res into a responsive object. Here is a small optimization tip. The property value will be hijacked only after it is accessed, avoiding the performance consumption of full hijacking during initialization.

When to call the get function

Before answering this question, we need to go back to the previous article about setup - Unveiling the mystery of the Vue3.0 setup function .

• The setup() function will be executed in the setupStatefulComponent function, and the execution result will be obtained:

• The logic of handleSetupResult is to assign the interval setupResult to instance.setupState :

• This instance.setupState is proxied by instance.ctx , so accessing and modifying instance.ctx can directly access and modify instance.setupState :

• We mentioned before that rendering a subtree VNode is to call the render function. Let's use template compilation to see what render function in our example looks like?

• It is very clear. When rendering the template, person attribute object will be taken from ctx , which is actually person attribute object of setupState . When name , age , and address of person attribute object of setupState are retrieved, the get function will be called to obtain the corresponding values.

Summary: When the component instance object executes the render function to generate a subtree VNode, the get function of the responsive object is called.

Track collects dependencies

We mentioned collection dependency twice in the code explanation of the get function above, so what is collection dependency ?
To achieve responsiveness, some functions will be automatically implemented when the data changes, such as executing certain functions. Because the side-effect rendering function can trigger the re-rendering of the component and update the DOM, the dependencies collected here are the side-effect rendering functions that need to be executed when the data changes.

That is to say, when the get function is executed, the side effect rendering function of the corresponding component will be collected.

We can take our example to illustrate the final result:

set Function

Code logic:

• 1. If the value has not changed, return directly;
• 2. Set the new value through Reflect ;
• 3. If it is not a property on the prototype chain, if it is a new property, execute add type trigger ; if it is a modified property, execute set type trigger . (If Reflect.set a property on the prototype chain, the setter will be called again, so the trigger does not need to be executed twice).

Trigger distribution dependency

The logic of trigger code is very clear. It finds the corresponding function from the dependency targetMap collected by the get function, and then executes these side-effect rendering functions to update the DOM.

Get and side effect rendering function association

Let's go back and answer another question: how is the side effect rendering function collected from the get function determined? That is, how do we determine which side effect rendering function to associate when accessing person.name?

Let's sort out the logic step by step:

• The last step of mounting mountComponent component is to execute a rendering function with side effects :

• setupRenderEffect first defines a componentUpdateFn component rendering function, then encapsulates this omponentUpdateFn in ReactiveEffect , assigns the run method of the ReactiveEffect object to update property of the component object, and then executes update method, which is actually executing the run method of the ReactiveEffect object.

• The run method of ReactiveEffect holds the passed function, the current scene is the componentUpdateFn component rendering function, and uses two global variables effectStack and activeEffect .
• When executing the run method, componentUpdateFn is first assigned to activeEffect , pushed into effectStack stack, and then the componentUpdateFn method is executed. When the execution is completed, componentUpdateFn is popped out of the stack and activeEffect is assigned as the new function at the top of the stack.

• When componentUpdateFn is executed, renderComponentRoot will be called, which essentially executes the render method of the component instance object.

• So far, we have come to the content of this article. If the corresponding data is accessed in the render method, the get function will be triggered. The data collected in get is

A stack structure is designed here mainly to solve the problem of nested effects.

Execution filtering of side effect rendering functions

If you think about it carefully, you may have a question? name, age, and address are all modified, and they are all associated with the same rendering function. In theory, modifying these three values ​​at the same time will trigger three component re-renderings, which is obviously unreasonable. So how does Vue control execution only once?

• We need to go back to where ReactiveEffect encapsulates the componentUpdateFn rendering function. Let's take a look at the second parameter, scheduler :

• When dispatching dependencies, if there is scheduler , scheduler will be executed:

• The execution logic of queueJob is to filter out and not execute the task if it is in the queue.

Conclusion

This article introduces the responsive principle of Vue3.0 in detail: using Proxy to hijack objects, the get method will be triggered when the object is accessed, and dependencies will be collected at this time; when the object data is modified, the set method will be triggered, and dependencies will be dispatched , that is, the side effect rendering function of the component will be called (not limited to), so that the component can be re-rendered and the DOM updated.

This is the end of this article about vue3.0 responsiveness. For more relevant vue3.0 responsiveness content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!