Vue3 finally meets you at the 70th birthday of our great motherland. 🚩



Before you learn about Vue3 data binding, check out the following:

1. Proxy. I have written an introduction to Proxy for your reference.

2, WeakMap

Then we can play happily.

The data binding section of Vue3 is mainly covered here



We focus on reactive. Ts and baseHandlers. Ts.

1. Two known problems of Proxy

  • The Proxy itself does not support in-depth detection of objects

  • Proxy itself supports array change detection, but there is a risk of multiple triggers

2. How to solve Vue3

2-1

To solve the first problem, for starters, we can use violent recursion to start with a Proxy for all objects within the object.



The result is that the proxy looks like the following:



As you can see, the objects and arrays inside the object are already proxied. When obJ is a very large and complex object, this will not perform well, so let’s take a look at what Vue does.

In Vue, we only Proxy the outermost objects at first, and lazily create Proxy proxies for the inner objects only when they need to be accessed. To do this, we need to modify the handler function.



After completing the above operation, Vue3 also does one thing, that is to store all dynamically created proxies in a WeakMap, so that we do not have to dynamically create them every time we perform get operation, after all, it is very memory consuming. In Vue3 source code we can have two WeakMaps that do just that. To this end, we also need to transform the createReactiveObject method and pass in two WeakMaps for caching. In addition, toRaw this WeakMap why to use, leave you to think about 😊.



2-2

Let’s solve the second problem. Suppose we have an array arr=[1,2]. When we perform arr.push(3), two attributes of arr change. In addition, the length attribute of arR has been changed, increasing by 1. Therefore, if a Proxy is used to hijack the set method of the array, two set operations will be triggered, one corresponding to key 2 and the other corresponding to key length.



HasOwnProperty is used to determine whether the property exists or not. If it does not, trigger add… ; If it is an existing attribute, the value corresponding to the same key on the current value and target, that is, the oldValue in the code, is equal. If it is not equal, the trigger set will be executed. . Reflect.set(target, key, value, receiver) is executed when the last callback with key 2 is triggered. At this point, its array length is already +1, so in the callback with key length, oldValue and value are equal, both are 3. This way, we don’t need to trigger render multiple times, and the code in Vue3 is written nicely, 🐂🍺.

So far, the two big problems of Proxy original have been reasonably solved. Next, there are some conventional preconditions. In Vue3, only the data binding of array, object, Map, WeakMap, Set, WeakSet is done. Basic data types and some built-in JS objects such as Date, Promise, and Reg are returned directly without Proxy processing.

Let’s take a look at the comparison between the demo and Vue3 source code used in this article. We can see that the general structure is the same, but of course demo has made a lot of simplification.



3. The demo summary

This gives you an idea of data binding in Vue3. The full demo code is here. Write imperfect place, still ask each big guy to give more advice.