Preface
In vue3effectFunctions are the core of responsive formulas, and they are called side effects functions. So what are side effects functions? Let's take a look.
In vue, changing the data target may cause changes in other data or views. Then, the effects of changing other data and changing the view are the side effects of changing the target. Like watch, computed, these are functions that will have side effects, and their underlying layer uses effect.
Let's take a look firsteffectprinciple. First, let’s understand a few important global variables.
targetMap
targetMap is a WeakMap that stores the relationship of {target -> key -> dep}. The key of targetMap is the original object that needs to be processed responsively. The value of targetMap is a Map, the key of Map is the attribute of the original object, and the value of Map is the side effect function Set associated with each property. The side effect function is the dependency we need to track, that is, the subscriber.
activeEffect
activeEffect saves the currently executing side effect function. It is an object. The type of effect is as follows:
let activeEffect: ReactiveEffect | undefined
// effect typeclass ReactiveEffect<T = any> {
active = true
deps: Dep[] = []
parent: ReactiveEffect | undefined = undefined
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope
) {
recordEffectScope(this, scope)
}
run(){}
stop() {}
}shouldTrack
The shouldTrack variable is used to identify whether dependency collection is enabled. Dependency collection is performed only when the value of shouldTrack is true, that is, add side effect functions to the dependency collection. The initialization value is true. When running() is executed, shouldTrack will be set to true, and dependency collection will be enabled.
effect
Next, let’s take a look at the implementation principle of the side effect function. When the dependent data changes, the side effect function will trigger. For sure, it will definitely involve dependency collection, collection and tracking. Therefore, we will also explain the relationship between track, trigger and effect later.
interface ReactiveEffectRunner<T = any> {
(): T
// ReactiveEffect is the type of activeEffect mentioned above effect: ReactiveEffect
}
function effect<T = any>(
fn: () => T,
options?: ReactiveEffectOptions
): ReactiveEffectRunner {
// If the passed fn itself is an effect, then the side effects of the effect are directly executed if ((fn as ReactiveEffectRunner).effect) {
fn = (fn as ReactiveEffectRunner).
}
// Package fn into effect const _effect = new ReactiveEffect(fn)
if (options) {
extend(_effect, options)
if () recordEffectScope(_effect, )
}
// Not delayed execution, directly execute side effect functions if (!options || !) {
_effect.run()
}
const runner = _effect.(_effect) as ReactiveEffectRunner
= _effect
return runner
}fnJust pass it toeffectThe side effects willfnPass toReactiveEffectPack it and pack it into standardeffecttype. StandardeffectType isReactiveEffectclass, withactive、deps、deps、run()、stop()These attribute methods. inrunThe method is to execute the passed side effect functionfn. buteffectThe function returns notReactiveEffectType, butReactiveEffectRunnerType, interfaceReactiveEffectRunnerHaveeffectProperties, it isReactiveEffecttype, so effect eventually needs = _effect and then return runner.
The side effects we pass in are executed in the run() of effect. Need to focus on run.
run() {
if (!) {
return ()
}
let parent: ReactiveEffect | undefined = activeEffect
let lastShouldTrack = shouldTrack
while (parent) {
if (parent === this) {
return
}
parent =
}
try {
= activeEffect
// Global activeEffect points to the current execution itself activeEffect = this
// Turn on dependency collection shouldTrack = true
trackOpBit = 1 << ++effectTrackDepth
if (effectTrackDepth <= maxMarkerBits) {
initDepMarkers(this)
} else {
cleanupEffect(this)
}
// Execute side effect functions return ()
} finally {
if (effectTrackDepth <= maxMarkerBits) {
finalizeDepMarkers(this)
}
trackOpBit = 1 << --effectTrackDepth
activeEffect =
shouldTrack = lastShouldTrack
= undefined
if () {
()
}
}
}implementrunWhen the whole thing isactiveEffectPoint to itself, that is, the currently executedeffect, then enable the dependency collection identification bit to execute the side effect function.
Speaking of this, we don't seem to have found it yeteffect and trackandtriggerWhat does it matter.track、triggerFunctions andeffectFunctions are all located in the same file as the source code, so they must be related. Next, let's take a looktracklogic.
track(target: object, type: TrackOpTypes, key: unknown) {
if (shouldTrack && activeEffect) {
let depsMap = (target)
if (!depsMap) {
(target, (depsMap = new Map()))
}
let dep = (key)
if (!dep) {
(key, (dep = createDep()))
}
const eventInfo = __DEV__
? { effect: activeEffect, target, type, key }
: undefined
trackEffects(dep, eventInfo)
}
}We know, in researchvueWhen binding to two-way data, dependency collection and dependency tracking are required.trackIt is the process of dependency collection. When we initialize data or render some variables in a template through a responsive API, we need to perform dependency collection, that is,track. Dependence is our side effect function. The process of dependency collection is actually the process of collecting side effect functions. And the side effects are what we just mentioned aboveeffect. This is related. Just studiedeffectWhen, some global variables were mentioned, among whichtargetMapStored{target -> key -> dep}The process of our reliance on the collection is the process of storing side effects. Therefore, in the track, the passed parameter target corresponds to thetargetMapkey. Check global variables firsttargetMapWhether this exists intarget, if not, initialize the map assignment. Similarly, use the key to find the final side effects Set, and if not, the settings will be initialized. At this point, we have improved{target -> key -> dep}Let's take a look at the relationshiptrackEffects。
export function trackEffects(
dep: Dep,
debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
let shouldTrack = false
if (effectTrackDepth <= maxMarkerBits) {
if (!newTracked(dep)) {
|= trackOpBit // set newly tracked
shouldTrack = !wasTracked(dep)
}
} else {
// Full cleanup mode.
shouldTrack = !(activeEffect!)
}
if (shouldTrack) {
(activeEffect!)
activeEffect!.(dep)
if (__DEV__ && activeEffect!.onTrack) {
activeEffect!.onTrack({
effect: activeEffect!,
...debuggerEventExtraInfo!
})
}
}
}trackEffectsThe logic is actually to activate the currently activatedactiveEffectPut it indepIn this way, the dependency collection process is completed.triggerI won't go into details about the process, it's based on{target -> key -> dep}The relationships are found layer by layerdep, and then execute the side effect function.
Speaking of this, some people may still not understand, if not usedwatch、computedThese APIs with side effects,track 、triggerandeffectWhat's the matter? ThattrackWhat are the side effects of collection?
Speaking of this, I want to say, regarding the side effects, in addition towatch、computedFn manually passed by users in these APIs is considered a side effect, and page rendering is also a side effect. We use the two-way data binding feature in vue, which means that when we define a responsive variable, if this responsive variable is used in the template, the rendering of this variable in the template is responsive, and this rendering is a side effect, and then the rendering of this page needs to be collected into the dep. If this variable still appears as the inside of fn in watch, then there is another side effect of this variable and needs to be collected additionally. So dep is a data structure of a Set. When this variable changes, the page needs to be re-rendered and the watch needs to be recalculated. This is the trigger process.
Of course, these are aimed at responsive data. If we only define a static data, then there is no need to rely on collection, and it is not responsive. It should be clear that this is the case.effectIt is closely related to responsiveness.
computed
After talking about effect, it is not difficult for us to know that computed and watch are also effects, but the parameters are different. Let's take a brief look at computed.
constructor(
getter: ComputedGetter<T>,
private readonly _setter: ComputedSetter<T>,
isReadonly: boolean,
isSSR: boolean
) {
// computered is also instantiated effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true
triggerRefValue(this)
}
})
= this
= this._cacheable = !isSSR
this[ReactiveFlags.IS_READONLY] = isReadonly
}From the compiled constructor, we can see that computed is also implemented by instantiating effect, but the parameters passed are different, so we will call computedEffect for the time being. You can see that the computed property of computedEffect is true.
watch
Note: Although watch depends on the effect function, it does not belong to the reactivity directory in the source code directory, but is in the runtime-core directory.
const effect = new ReactiveEffect(getter, scheduler)
You can see that ReactiveEffect is also used to create side effects in the watch, but the scheduler parameter is passed more.
Summarize
This is all about this article about what the effect function in vue3 is. For more related contents of the effect function in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!