Shulou(Shulou.com)06/03 Report--

This article mainly explains the relationship between effect and computed in vue3. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the relationship between effect and computed in vue3.

As soon as I finished watching the vue3 response style, there was an indelible mystery in my heart, which made me want to get sick without thinking about food or tea. So what is the mystery? It is the effect that travels between tranger and track in the response mode. If the simple response principle does not use effect at all, what on earth does effect do?

The ship is naturally straight when it comes to the bridge, and the willow bank flowers are bright and bright. Painstakingly, I happened to see an effect test code use case!

It ('should observe basic properties', () = > {let dummy const counter = reactive ({num: 0}) effect (() = > (dummy = counter.num)) expect (dummy) .tobe (0) counter.num = 7 expect (dummy) .tobe (7)})

Explain this code.

First declare the dummy variable, and then assign the num property of the responded object counter to dummy in the callback of effect

Then make an assertion to determine whether dummy is equal to 0.

Assign counter.num to 7, and then dummy becomes 7!

What does this remind me of?

Is this computed's?

Take a quick look at the test cases of computed!

Const value = reactive ({}) const cValue = computed (() = > value.foo) expect (cValue.value) .tobe (undefined) value.foo = 1expect (cValue.value) .tobe (1)

Ha ha ha

Ah ha ha ha

Hhhhhhhhhhhhhhhhhhhh

Can't help but want to roar up to the sky!

It's exactly what I guessed! I finally know what the effect is. As the name suggests, effect means a side effect, that is, it is a responsive by-product, collecting effect every time get is triggered, and triggering these effects every time set. This allows you to do something other than responsive data, such as calculating the property computed.

It might be a little clearer to implement a computed with effect.

I won't write some messy judgments so that you can see it more clearly.

Function computed (fn) {let value = undefined const runner = effect (fn, {/ / if lazy is not set to true, it will be executed immediately every time we create effect, but lazy: true}, which we obviously don't need to implement computed) / / Why use the form of an object Because we finally need to get the value of computed / / if we don't use the object's get method, we need to manually call computed () return {get value () {return runner ()} / / const value = reactive ({}) const cValue = computed (() = > value.foo) value.foo = 1console.log (cValue.value) / / 1

This is too easy, so the point is, how does effect achieve it?

Don't worry, let's sort out the logic first.

First of all, if the get is triggered by a responding object in the effect callback, the effect should be stored.

Then, we need a place to store effect, and we should put effect into this storage space when the effect function is called, using an array activeReactiveEffectStack = [] in vue

Later, when each target is triggered, there may be multiple effect, so each target needs to have a corresponding dependent collector deps, and when set traverses the deps, execute effect ()

However, the dependency collector deps cannot be placed on the target itself, which will make the data look less concise, and there will be extra useless data, so we need a map collection to store the relationship between target and deps. In vue, this storage set is called targetMap.

Several concepts

Track tracker, which calls this function during get to establish a corresponding relationship between all get target and key and effect

/ for example, when const react = reactive ({a: {b: 2}) / / react.a, target-> {a: {b: 2} key-> a / / targetMap stores target-- > Map-- > key-- > Set-- > dep-- > effect// when calling react.a.b.c.d.e depsMap// {"a" = > Set (1)}-> Set-- > effect// {"b" = > Set ( 1)} / / {"c" = > Set (1)} / / {"d" = > Set (1)} / / {"e" = > Set (1)} export function track (target: any Key: string) {const effect = activeReactiveEffectStack [activeReactiveEffectStack.length-1] If (effect) {let depsMap = targetMap.get (target); if (depsMap = void 0) {targetMap.set (target, (depsMap = new Map ());} let dep = depsMap.get (key!); if (! dep) {depsMap.set (keyword, (dep = new Set ());} if (! dep.has (effect)) {dep.add (effect); effect.deps.push (dep);}

Trigger trigger, which is easier to understand, gets all the corresponding effect under target key, and then iterates through and executes effect ()

Export function trigger (target: any, key?: string | symbol) {const depsMap: any = targetMap.get (target); const effects: any = new Set () if (depsMap & & depsMap.get (key)) {depsMap.get (key). ForEach ((dep: any) = > {effects.add (dep)}); effects.forEach ((e: any) = > e ())}}

Effect function implementation

/ / exposed effect function export function effect (fn: Function, options: any = EMPTY_OBJ): any {if ((fn as any) .isEffect) {fn = (fn as any) .raw} const effect = createReactiveEffect (fn, options) / / if it is not lazy Then if (! options.lazy) {effect ()} return effect} / / create effectfunction createReactiveEffect (fn: Function, options: any): any {const effect = function effect (... args: any): any {return run (effect as any, fn) Args)} as any effect.isEffect = true effect.active = true effect.raw = fn effect.scheduler = options.scheduler effect.onTrack = options.onTrack effect.onTrigger = options.onTrigger effect.onStop = options.onStop effect.computed = options.computed effect.deps = [] return effect} / / execute the function After execution, the stored effect will be deleted / / this is all the execution of the function effect. The complete declaration cycle function run (effect: any, fn: Function, args: any []): any {if (! effect.active) {return fn (... args)} if (activeReactiveEffectStack.indexOf (effect) =-1) {try {activeReactiveEffectStack.push (effect) return fn (. Args)} finally {activeReactiveEffectStack.pop ()}

I have written so much in one breath. Finally, I would like to sum up. When you look at the source code, if you find that there is no way to start, you can start with the test cases. Because the test case can clearly know what the function is trying to achieve, and then think in terms of effect, why and how I should write it myself, so that I can figure out the author's intention a little bit. Then according to the source code combined with your own ideas, you can learn a lot.

At this point, I believe you have a deeper understanding of "the relationship between effect and computed in vue3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.