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

What is the meaning of Watcher in Vue data driver? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

If Object.defineProperty is the data-driven soul of vue, then Watcher is his skeleton.

Brief introduction of Watcher

When the simplified Watcher is in new, it will eventually call its own get method, and the first statement pushTarget (this) in the get method is the first key to open the data driver.

PushTarget assigns the incoming Watcher object to Dep.target. Remember when I talked about Object.defineProperty, I mentioned that Dep.target.update is the trigger point for updating view, and I finally found it here!

We see that the update method finally executes the queueWatcher, and continues to find that this is actually an update queue. Vue collects updates from all the update of the same micro task, and finally executes the watcher.run,run method and the getAndInvoke method, and the getAndInvoke executes the this.get method.

After a long circle, we finally find that when the attribute value is changed, the this.get method of the Watcher corresponding to Dep.target is triggered, and the this.get method is actually the callback function passed in. Recall that when vue is mounted to the real dom, the callback passed in by newWatcher is updateComponent. Connected in series, the conclusion is drawn:

When we use the get property, the Dep dispatcher collects Watcher as a dependency

When we set property, the Dep dispatcher event is distributed so that all collected dependencies execute this.get, and the view is updated.

Look at the problem from a macro point of view

When we newVue, we will first wrap the incoming data as an observer by vue, and all get and set actions will capture and perform the response

Next, vue will mount the vue object to the real dom (virtual rendering actually). At this time, new a Watcher. In newWatcher, the this.get initialization value will be executed once, and the updateComponent function will be calibrated. At this time, the vue rendering process will be triggered.

In the process of vue rendering, all data need to perform get behavior to get a value and assign a value to the real dom, so the get of all data attributes is triggered, and Dep.target is the Watcher of updateComponent, so all data attribute dispatchers collect this Watcher. In set, the dispatcher notify distributes events, the collected dependent Watcher is notified to update, and all updateCompoent is executed to update view.

After reading the above, have you mastered the meaning of Watcher in Vue data driver? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.