scheduler internal tasks
Jobs in the scheduler are also used to perform various other internal tasks such as triggering some lifecycle hooks and updating template refs.
reactivity
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
reactive effect definition
A reactive effect is part of Vue's reactivity system referring to the process of tracking the dependencies of a function and re-running that function when the values of those dependencies change. watchEffect() is the most direct way to create an effect. Various other parts of Vue use effects internally such as component rendering updates, computed(), and watch().
reactive dependencies tracking
Vue can only track reactive dependencies within a reactive effect. If a property's value is read outside a reactive effect, it will lose reactivity, in the sense that Vue won't know what to do if that property subsequently changes.
reactivity definition
Reactivity refers to the ability to automatically perform actions in response to data changes. For example, updating the DOM or making a network request when a data value changes. In a Vue context, reactivity is used to describe a collection of features that combine to form a reactivity system, which is exposed via the Reactivity API.
Vue reactivity system implementation
Vue's reactivity system tracks property access at runtime using both Proxy wrappers and getter/setter functions for properties. This is different from static analysis of code to determine dependencies.
Reactivity API definition
The Reactivity API is a collection of core Vue functions related to reactivity that can be used independently of components. It includes functions such as ref(), reactive(), computed(), watch(), and watchEffect(). The Reactivity API is a subset of the Composition API.
ref definition
A ref is part of Vue's reactivity system. It is an object with a single reactive property called value. There are various different types of ref that can be created using ref(), shallowRef(), computed(), and customRef(). The function isRef() can be used to check whether an object is a ref, and isReadonly() can be used to check whether the ref allows direct reassignment of its value.
scheduler definition
The scheduler is the part of Vue's internals that controls the timing of when reactive effects are run. When reactive state changes, Vue doesn't immediately trigger rendering updates. Instead, it batches them together using a queue. This ensures that a component only re-renders once, even if multiple changes are made to the underlying data.
side effect definition
A side effect refers to operations or functions that do something beyond their local scope. For example, setting a property like user.name = null is expected to change the value of user.name. If it also triggers Vue's reactivity system, then this would be described as a side effect. When a function is described as having side effects, it means the function performs some sort of action that is observable outside the function, aside from just returning a value.
side effects in rendering and computed
The term side effect is often used when describing rendering or computed properties. It is considered best practice for rendering to have no side effects. Likewise, the getter function for a computed property should have no side effects.