vue의 $mount 분석

This article mainly leads everyone to analyze $mount.

$mount does mainly the following work in general:3step:

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.new a Watcher instance, trigger updateComponent method.

3.generate vnode, after patch, update vnode to dom. Due to space limitations, we will discuss the first two steps here, and the third step will be discussed in the next article. 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. After getting the template, what do we do? As shown in the figure below.

　　

we can see that compileToFunctions is called to convert template into render function. There are two processes in it:

• parse the template into ast syntax tree.
• generate the render function through ast syntax tree.

specifically, the parsing of template into ast syntax tree will not be discussed here, and we will have a separate chapter to analyze it if time allows. Now that we have the render function, what do we do next? That's right, we start mountComponent. As shown in the figure below:

　　

we can see from the figure above that the program declares an updateComponent method, which is the method to be called by the Watcher instance, and we will analyze it when we get to the 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. So, we finally get to 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 */);

먼저, 주석에 나오는 _watcher가 무엇인지 분석해 보겠습니다. forceupdate의 코드를 보면 알 수 있습니다:

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

이는 vm의 _watcher의 update 메서드를 호출하는 것입니다. 강제 업데이트를 위해 사용됩니다. 왜 강제 업데이트라고 하는지요? Vue에서는 새 값 == 이전 값이면 watcher가 뷰를 업데이트하지 않도록 판단합니다. 따라서 강제로 업데이트하려면 forceupdate를 호출해야 합니다. 그럼传入된 매개변수를 확인해 보겠습니다:

• vm: 현재의 vm 인스턴스
• updateComponent는 중요합니다. 이는 나중에 vnode를 DOM에 업데이트하는 데 사용됩니다.
• noop 무의미한 함수
• null option 옵션, 없으면 null
• true는 watcher의 유형을 판단하는 데 사용됩니다. computed 계산 속성과 options에서 watcher를 설정할 때도 new Watcher를 사용합니다. 이를 통해 이 세 가지를 구분합니다. 좋습니다, new Watcher가 무엇을 하는지 확인해 보겠습니다. 아래 그림을 참조하세요.
  

　

먼저, 코드에 있는 이 판단을 확인해 보겠습니다

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

이를 통해, watcher의 상황이 뷰를 렌더링하는 데 사용되었는지 확인할 수 있습니다. 즉, mountComponent에서 new Watcher를 호출할 때만 this를 _watcher에 할당합니다. 그런 다음 watcher를 _watchers에 push하여 컴포넌트가 파괴될 때 watcher도 함께 파괴되도록 합니다. 그리고 watcher의 멤버를 초기화하는 코드는 다음과 같습니다:

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

그다음, getter에 값 할당하는 과정입니다, this.getter = expOrFn. 얼마 전에 전달된 updateComponent 함수를 기억하시나요? 맞습니다, 이 값 할당이 getter에 대해 이루어졌습니다. 그런 다음 이렇게 됩니다:

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

get 메서드에 들어가서 무엇을 했는지 보겠습니다. get 코드는 다음과 같습니다:

　

먼저 pushTarget(this)를 실행하는 것을 볼 수 있습니다. pushTarget(this) 코드는 다음과 같습니다:

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

그렇다면 현재 Dep.target이 있으면 targetStack에 target을 넣고, 없으면 현재 target을 설정합니다. 즉, 이 watcher입니다. 그런 다음, getter 속성을 실행합니다. 이것은 updateComponent 함수에 just 전달된 것입니다. 그리고 updateComponent는 우리가 초기에 언급한 세 번째 단계입니다.

결론

위에서 소개한 vue의 $mount에 대해 설명드렸습니다. 많은 도움이 되셨기를 바랍니다. 어떤 질문이나 의문이 있으시면 댓글을 남겨 주시기 바랍니다. 저는 즉시 답변을 드리겠습니다. 또한, 나락 튜토리얼 사이트에 대한 지원에 감사드립니다!

고지사항: 본 문서의 내용은 인터넷에서 수집되었으며, 저작권자는 본 사이트에 소유되지 않으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 본 사이트는 인공적으로 편집하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 발견되면, 이메일을 notice#w로 보내 주시기 바랍니다.3codebox.com에 이메일을 보내시면 (#을 @으로 변경하시기 바랍니다.) 신고를 하고 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 저작권 침해 내용을 삭제할 것입니다。