The ref(), computed() and watchEffect() APIs are all part of the Composition API. If there is one, we lookup the subscriber effects (stored in a Set) for the property being tracked, and add the effect to the Set: Inside track(), we check whether there is a currently running effect. The returned proxy from reactive(), although behaving just like the original, has a different identity if we compare it to the original using the = operator. Note this "disconnect" only affects the variable binding - if the variable points to a non-primitive value such as an object, mutating the object would still be reactive. When you assign or destructure a reactive object's property to a local variable, accessing or assigning to that variable is non-reactive because it no longer triggers the get / set proxy traps on the source object. This explains a few limitations of reactive objects that we have discussed in the fundamentals section: Here's some pseudo-code that illustrates how they work:Ĭode snippets here and below are meant to explain the core concepts in the simplest form possible, so many details are omitted, and edge cases ignored. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs. Vue 2 used getter / setters exclusively due to browser support limitations.
There are two ways of intercepting property access in JavaScript: getter / setters and Proxies. What we can do though, is intercept the reading and writing of object properties. There's just no mechanism for doing that in vanilla JavaScript.
We can't really track the reading and writing of local variables like in the example. when A0 is assigned a new value, notify all its subscriber effects to re-run. because A0 and A1 are read when update() is being executed, update() becomes a subscriber to both A0 and A1 after the first call.ĭetect when a variable is mutated. If a variable is read when there is a currently running effect, make that effect a subscriber to that variable. when evaluating the expression A0 + A1, both A0 and A1 are read. This whenDepsChange() function has the following tasks:
0 kommentar(er)
