Support asynchronous reactivity

[donatas-luciunas]

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:

• Ref (equivalent to ShallowRef in Vue)
• Computed (equivalent to Computed in Vue)
• Watcher (equivalent to Watcher in Vue)

API is a bit different. To make sure dependencies are tracked asynchronously it is necessary to use value function, for example

const a = new Ref(5);
const b = new Computed((value) => {
    return value(a) + 4;
});

You can read tests (ref.test.ts, computed.test.ts, watcher.test.ts) to familiarize with the behaviour.

The library has few optimizations:

• Let's say a depends on b and b depends on c. If c is changed, but b after recomputing got same result, a will not be recomputed (ignore same computed value)
• Let's say a depends on b and c. If b and c are changed synchronously (or b 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

export const userInformation = computed(async () => await (await fetch(...)).json())

and import it to components to use it in template

<v-card :title="userInformation.email" :loading="isPending(userInformation)" />

And that's it. The beauty:

• user information is loaded lazily (not loaded in other routes)
• user information is loaded only when it is actually needed (the template says what is needed, not the component; binding in template is a watcher; not loaded when under v-if="false")
• user information is loaded once and reused

Imagine what if userInformation depends on let's say selectedUserId. You just update selectedUserId, 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.