Shulou(Shulou.com)05/31 Report--

This article "Vue2 responsive system nesting how to achieve" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "Vue2 responsive system nesting how to achieve" article it.

1. Scene

There must be a situation where components are nested within components in development, similar to the following. Vue

{{text}} {{text}}

Go back to our previous responsive system and simulate the situation above:

Import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {text: "hello, world", inner: "Internal",}; observe (data); const updateMyComponent = () = > {console.log ("Child component received:", data.inner);}; const updateParentComponent = () = > {new Watcher (updateMyComponent); console.log ("parent component received:", data.text);}; new Watcher (updateParentComponent) Data.text = "hello, liang"

You can think about what is output above in a minute. one

First of all, remember what you will do. New Watcher

The first step is to save the current function, and then assign the global value to the current object before executing the current function. Dep.targetWatcher

The next time the function is executed, it will be triggered if the corresponding property is read, thus collecting the current into the property. GettergetWatcherDep

2. Execution process import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {text: "hello, world", inner: "Internal",}; observe (data); const updateMyComponent = () = > {console.log ("child components received:", data.inner);}; const updateParentComponent = () = > {new Watcher (updateMyComponent); console.log ("parent component received:", data.text);}; new Watcher (updateParentComponent) Data.text = "hello, liang"

Let's sort it out step by step:

New Watcher (updateParentComponent)

Will be assigned to the value of the saved function. Dep.targetupdateParentComponentWatcher

Next, execute the function. UpdateParentComponent

New Watcher (updateMyComponent)

Will be assigned to the value of the saved function. Dep.targetupdateMyComponentWatcher

Next, execute the function. UpdateMyComponent

Const updateMyComponent = () = > {console.log ("subcomponent received:", data.inner);}; / / read the inner variable. / / the Dep of data.inner collects the current Watcher (the `updateMyComponent` function is saved) const updateParentComponent = () = > {new Watcher (updateMyComponent); console.log ("parent component receives:", data.text);}; / / reads the text variable. / / the Dep of data.text collects the current Watcher (the `updateMyComponent` function is saved)

Data.text = "hello, liang"

The function that is triggered, which executes what it depends on, and at this point is the function. TextsetWatcherupdateMyComponent

So the final output of the above code is:

The sub-component receives: internal / / new Watcher (updateMyComponent); time output

Parent component received: hello, world / / new Watcher (updateParentComponent); time output

The subcomponent receives: internal / / data.text = "hello, liang"; output

However, the child component is not dependent, and the dependent parent component is not executed. Data.textdata.text

3. Repair

The problem above is that we are using a single variable when we save the current execution. WatcherDep.target = null; / / static variable, globally unique

Recall the handling of function parameters when learning a language or assembly language: C

Function b (p) {console.log (p);} function a (p) {b ("child"); console.log (p);} a ("parent")

When the function is nested, when we execute the function, we will first press the parameters into the stack, and then execute the function. Similarly, the parameters will be pushed into the stack, and the parameters will be off the stack after the function is executed. At this point, when you return to the function, you can get the value of the parameter correctly. Abbap

Corresponding to the collection, we can also use a stack to save, before the execution of the function will be pressed into the stack, after the execution of the function will pop up the stack. Where it always points to the top of the stack and represents the currently executing function. WatcherWatcherWatcherDep.targetWatcher

Back in the code, we provide a way to push and unstack. Dep

Import {remove} from ". / util"; let uid = 0 position export default class Dep {... Omit} Dep.target = null; / / static variable, globally unique / / The current target watcher being evaluated.// This is globally unique because only one watcher// can be evaluated at a time.const targetStack = []; export function pushTarget (target) {targetStack.push (target); Dep.target = target;} export function popTarget () {targetStack.pop (); Dep.target = targetStack [targetStack.length-1]; / / assign to top stack element}

Then, the function is put on the stack before the function is executed, and off the stack after the function is executed. Watcher

Import {pushTarget, popTarget} from ". / dep"; export default class Watcher {constructor (Fn) {this.getter = Fn; this.depIds = new Set (); / / have a has function to determine whether a certain id this.deps = []; this.newDeps = []; / / record the new dependency this.newDepIds = new Set (); this.get () } / * Evaluate the getter, and re-collect dependencies. * / get () {/ * modified place * * / pushTarget (this) / / Save the Watcher / * / let value; try {value = this.getter.call ();} catch (e) {throw e that wraps the currently executing function } finally {/ * modified place * * / popTarget () / * * / this.cleanupDeps ();} return value;}...} 4, test

Going back to the beginning of the scene, let's do it again:

Import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {text: "hello, world", inner: "Internal",}; observe (data); const updateMyComponent = () = > {console.log ("Child component received:", data.inner);}; const updateParentComponent = () = > {new Watcher (updateMyComponent); console.log ("parent component received:", data.text);}; new Watcher (updateParentComponent) Data.text = "hello, liang"

When executed, it will be put into the stack. New Watcher (updateParentComponent); Watcher

If you enter the function, it will be on the stack when executed. UpdateParentComponentnew Watcher (updateMyComponent); Watcher

Execute the function, collect the current, and release the stack after execution. UpdateMyComponentdata.innerDep.targetWatcher

Continue to execute the function to collect the current. UpdateParentComponentdata.textDep.target

At this point, the dependency becomes normal and the function is triggered, resulting in the following output: data.textupdateParentComponent

Subcomponent received: internal

Parent component received: hello, world

Subcomponent received: internal

Parent component received: hello, liang

The above is about the content of this article on "how to achieve the nesting of Vue2 responsive systems". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

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.