English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Parsing $mount in vue

This article mainly leads everyone to analyze $mount.

$mount's work is mainly divided into3Step:

1.If there is no render function in your option, then, through compileToFunctions, compile the HTML template into a Render function that can generate VNode.

2.Create a Watcher instance and trigger the updateComponent method.

3.Generate vnode, update vnode to dom through patch. Due to space limitations, the first two steps are discussed here, and the third step will be discussed in the next article. Well, let's talk about it specifically. First, we come to the $mount function, as shown in the figure below:

 

We can see that the code first checks if there is a render function in the option; if not, it further checks if there is a template; if not, it uses the outerHTML of the DOM element. What do we do after getting the template? As shown in the figure below.

  

We can see that compileToFunctions is called to convert the template into a render function. There are two processes involved here:

  • Parsing the template into an AST syntax tree.
  • Generating the render function through the AST syntax tree.

Specifically, the translation of template into AST syntax tree will not be discussed here; it will be analyzed in a separate chapter if time permits. Well, now that we have obtained the render function, what will we do next? That's right, we start mountComponent. As shown in the figure below:

  

As can be seen from the figure above, the program declares an updateComponent method, which is the method to be called by the Watcher instance, and it will be analyzed when we come to Watcher later. As to why there is a conditional statement to declare the updateComponent method, in fact, from performance, one method is used to test the performance of render and update. Well, we have finally arrived at Watcher, let's first look at this line of code:

// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, null, true) /* isRenderWatcher */);

Let's analyze what the comment says about _watcher. In fact, you can see what forceupdate does by looking at the code:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

it is to call this vm's _watcher's update method. It is used to force an update. Why is it called force update? Vue has a judgment, if the new value == old value, then the watcher's update view is not triggered. So, if you have to update, you have to call forceupdate to force an update. Let's take a look at the parameters passed in:

  • vm: the current vm instance
  • updateComponent is very important, used to update vnode to dom later.
  • noop a function with no meaning
  • null option option, if not specified, it is null
  • true is mainly used to judge which watcher it is. Because both computed properties and watchers configured in options use new Watcher, and this is used to distinguish among the three. Okay, let's see what new Watcher does, as shown in the following figure.

 

Firstly, we see a judgment in the code:

if (isRenderWatcher) {
 vm._watcher = this;
}

You can see that this assignment of 'this' to _watcher only occurs when the watcher's context is used to render the view, that is, when new Watcher is called here in mountComponent. Then the watcher is pushed into _watchers, the purpose of which is to destroy the watcher along with the component when it is destroyed. Next is the initialization of the watcher's members, as shown in the code below:

this.deep = this.user = this.lazy = this.sync = false; />

Next, it is assigning to the getter, this.getter = expOrFn. Remember the updateComponent function passed earlier? That's right, it is this assignment that gives the getter its value. Then we come to:

this.value = this.lazy
 ? undefined
 : this.get();

Enter the get method, let's see what it does. The get code is shown in the figure below:

 

We can see that it first executes pushTarget(this), and the code for pushTarget(this) is as follows:

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

That is to say, if there is a Dep.target at present, put the target into the targetStack, if not, set it to the current target, that is, this watcher. Next, it executes its getter attribute, that is, the updateComponent function just passed in. And updateComponent is the third step we mentioned at the beginning.

Summary

The above is what the editor introduces to everyone about $mount in vue, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. We are also very grateful for everyone's support of the Yelling Tutorial website!

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

You may also like