How to understand the effectscope in Vue?

Question

The offical RFC

There is a example for effect

function createSharedComposable(composable) {
  let subscribers = 0
  let state, scope

  const dispose = () => {
    if (scope && --subscribers <= 0) {
      scope.stop()
      state = scope = null
    }
  }

  return (...args) => {
    subscribers++
    if (!state) {
      scope = effectScope(true)
      state = scope.run(() => composable(...args))
    }
    onScopeDispose(dispose)
    return state
  }
}

I know what it will do, it will force all components to calculate only once when we use useMouse API

But I can't understand the concept of effect, and how does it work?

Espeically some APIs for effect like getCurrentScope. I tried to see the return values of getCurrentScope, but i have gained nothing.

Please help me!

Eustatius

Answer 1

effect is a common term used in reactive frameworks (both VueJS and React) to refer to (I believe) side effect. If you are familiar with functional programming, you probably already know that it is called side effect because it is not "pure function", because it mutates shared or global state.

Ignore the academic terminology, effect in these systems merely refers to any application defined method that does something bespoke, like

const foo = () => {
  // I do something bespoke
}

The meaning of effect is really that broad. What your method actually does in its body does not matter to the framework. All that the framework knows is foo does some unstructured things. What VueJS does in extra, is to monitor, through its reactivity system, if your effect depends on any reactive data. And if it does, VueJS will re-run your effect every time the data it depends on changes.

effect (or side effect) isn't something bad or special or advanced. In fact, your application is all about making effects/side effects. For example, the commonest effect in a VueJS application is DOM manipulation. It is so common that VueJS extracts it into a different abstraction: template. Behind the scene, templates are compiled to render functions - which look a lot like the foo above - that get re-evaluated every time some dependent reactive data changes. That is how VueJS keeps your UI up to date.

Another extreme of common effects are those really bespoke ones, e.g. you just want to do some old fashion imperative things (like the jQuery style) whenever your data changes. And VueJS let you do it through watchEffect: you give VueJS a lambda, and VueJS will blindly call it every time its dependency changes without asking what it is doing.

VueJS discovers your dependency on reactive data by running your effect. As long as your effect accesses any reactive data (say, yourState.bar) during its execution, VueJS will notice that and record a dependency of your effect on yourState.bar

In its essence, the reactivity system is just the modern version of the good-old observable/subscriber pattern. Reactive states are the observables, and effects are the subscribers/observers. If you look beyond the magic layer and think of VueJS in the form of a subscriber pattern, there is one issue it cannot avoid: whenever you have subscribe, you will have to deal with unsubscribe, otherwise you will have memory or resource leaks simply because you keep holding on to subscribers (they in turn hold on to other things) and nothing can be freed. This unsubscribe part is what the RFC calls "effect dispose".

Typically you will have two challenges when dealing with this unsubscribing/disposing/cleaning up/cancelling business:

• deciding when to unsubscribe/dispose
• knowing how to unsubscribe/dispose

In a typical reactive framework, both of the above are application's responsibility. As the application dev, you are the only one who knows when a subscription is no longer needed and how to reverse the additional resource allocation (if any) you made at the time of creating the subscription.

But in a typical VueJS app you rarely need to manually deal with any kind of cleanup (stopping the DOM patching, watch, or computed etc). That is because VueJS takes care of it automatically. The reactive effects established within a component's setup method will be automatically disposed (whatever needed for a proper clean up) when the component is unmounted. How does that happen? Let's just say some other magic exists inside VueJS to associate all your effects with the life cycle of the corresponding component. Technically, as the RFC says, that magic is effectScope.

Conceptually, each component creates an effectScope. All your effects defined inside component setup method will be associated with that scope. When the component destroys, VueJS automatically destroys the scope, which will clean up the associated effects.

The RFC proposes to make effectScope a public api so that people can use it without using a VueJS component. This is possible because Vue3 is built with modularization. You can use Vue's reactivity module without using the entire VueJS. But without the underlying effectScope, you then have to manually dispose all your effects.

Tallbott

Great answer...should have way more upvotes. – Zounds

Answer 2

What would making a coffee look like in code?

snowingfox.getCupsOutOfCupboard();
snowingfox.getCoffeeOffShelf();
snowingfox.getMilkOutOfFridge();
snowingfox.boilingWater();
// ...

Now imagine each morning I wake up and have a coffee. You could say I'm making a coffee in reaction to waking up. How would I run this code repeatedly in response to an isMorning variable becoming true?

This is what effect solves in Vue 3. It wraps around a chunk of code that should be executed in response to reactive data being changed. In practise you most likely won't use effect directly, and instead rely on things like computed and watchEffect (which use effect in their implementations).

In short: effect is one part of Vue's reactivity system and is Vue's way of marking and locating code that should be re-run in response to data updates.

Docs: https://v3.vuejs.org/guide/reactivity.html

Course: https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity/

Here's how the initial code could be implemented to be reactive:

import { ref, watchEffect } from 'vue';

const isMorning = ref(false);

watchEffect(() => {
    if (!isMorning.value) return;
    
    snowingfox.getCupsOutOfCupboard();
    snowingfox.getCoffeeOffShelf();
    snowingfox.getMilkOutOfFridge();
    snowingfox.boilingWater();
});

Spadework

Answer 3

Effectscope Api has long been released now and official documentation is really good

Quarterage