foreword
This is the latest series of articles on the reactive object not "responsive" after a specific operation.
The main record is the related implementation mechanism of vue
Haha To understand this article, you need the basics of using vue and js
test case
The use case is as follows, here we focus on the calculation variable counterPlus100
problem debugging
For context, this is where the HelloWorld component is being rendered
To render the #text node corresponding to " this is counterPlus100 : 100 ", you need to get the value of this.counterPlus100
The compiled render function is as follows
The way to get the value of the variable is as follows, if any dependencies are updated, recalculate
Otherwise, get the result of the previous calculation directly
This is the "computed attribute cache" mentioned in the official document. The next time you get the corresponding value, if there is no change in the dependency, you will get Watcher.value directly
The specific embodiment of the computed attribute cache, when accessing the computed attribute in the business code, go directly to the computedGetter of counterPlus100
Where the getter of VueComponent.counterPlus100 is initialized
Where this._computedWatchers is initialized
When the counter variable is updated, the second Watcher is the Watcher of counterPlus100
It is lazy, it just updates the dirty flag, and then recalculates the next time it gets the value of counterPlus100
The processing of Watcher corresponding to counterPlus100 is as follows
over