Support asynchronous reactivity #696
donatas-luciunas
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I tried to promote this idea previousy vuejs/core#6058. I'd like to pitch high value and low cost again.
Low cost
It won't be a low cost, but maybe I can contribute to making it lower. I implemented asynchronous reactivity library myself async-reactivity and connector with Vue async-reactivity-vue. Feel free to use them.
It has 3 main building blocks:
API is a bit different. To make sure dependencies are tracked asynchronously it is necessary to use
value
function, for exampleYou can read tests (ref.test.ts, computed.test.ts, watcher.test.ts) to familiarize with the behaviour.
The library has few optimizations:
a
depends onb
andb
depends onc
. Ifc
is changed, butb
after recomputing got same result,a
will not be recomputed (ignore same computed value)a
depends onb
andc
. Ifb
andc
are changed synchronously (orb
is changed multiple times synchronously)a
will be recomputed only once (sync debounce)High value
Let's say there is a web app that has user information displayed on some routes.
We could declare shared variable outside of components
and import it to components to use it in template
And that's it. The beauty:
v-if="false"
)Imagine what if
userInformation
depends on let's sayselectedUserId
. You just updateselectedUserId
,userInformation
gets invalidated and loaded only if it has dependents (or when it gets dependents).If you want to refresh the data, you can achieve that by invalidating computed variable manually.
The beauty of this approach is even more obvious if you think about async dependents, for example few components are loaded for selected user based on user's information (for example agreements list is only loaded if user type is customer, etc.).
This would work very well with Vapor Mode.
Beta Was this translation helpful? Give feedback.
All reactions