![]() On the other hand, this makes it constrained by the syntax limitations of JavaScript, leading to the need of value containers like Vue refs. The pros of runtime reactivity are that it can work without a build step, and there are fewer edge cases. Vue's reactivity system is primarily runtime-based: the tracking and triggering are all performed while the code is running directly in the browser. All property access on the component instance ( this) triggers getter / setters for reactivity tracking, and options like watch and computed invoke their Composition API equivalents internally. In fact, in Vue 3 the Options API is implemented on top of the Composition API. If you have only been using Options API with Vue so far, you'll notice that Composition API is closer to how Vue's reactivity system works under the hood. The ref(), computed() and watchEffect() APIs are all part of the Composition API. Here's some pseudo-code that illustrates how they work: 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |