Because I learn front-end time is limited, only more than a year, if there are understanding problems, please do not be stingy with your advice
Be self-informed about usage details such as defineReactive
Some key points
-
$mount new Watcher passes the component’s updateComponent method to Watcher as the getter
-
PushTarget assigns the current watcher to dep. target in the watcher get
-
The Dep is the dispatch center/subscriber. It instantiates a Dep for each attribute and manages the Watcher that uses the attribute (collected in getter, notified in setter).
-
Watcher is a subscriber/observer
-
The subs array of the Dep of the data holds the observer object to which the data is bound. The DEPS array of the observer object holds the data Dep associated with the observer. So the Dep of data and Watcher are actually many-to-many relationships
-
$watch and computed observer are created and bound before created health hook functions, and Render observer is created and bound before Mounted, so in the same component, The id of the render observer is greater than that of the other observer (id is the basis for ascending sorting in the queue later). In other words, the renderer observer must be the last to execute when data changes within the same component observer. This is easy to understand, other observers will inevitably make changes to the data, if the render function observer executes first, then other observers make changes to the data, it will not be able to render the data accurately on the page, resulting in data inconsistency.
-
DefineReactive — const dep = new dep () –> getter –> dep.append() –> dep.target.adddep (this) Target is a watcher. Watcher. AddDep adds the current watcher to the Dep instance.
