Why?

Online existing Vue source code analysis articles a large number of search, but why do I have to do such a thing? Because feel the paper come zhongjue shallow, must know this to practice.

Then the usual project is mainly Vue. In the process of using Vue, there are some questions about some of its conventions. The official website may only advise you to do this, but we may not know the core implementation. Such as:

  • How does V-for Key achieve the “in-place reuse” strategy
  • How is array update detection done
  • Why can set dynamically add root-level reactive properties
  • Why can Vue support WEEX, and later MPVue, across platforms
  • .

Secondly, did not update the content for a long time, before the Vue source code is also a little research, but there is no very systematic record, now take some time to do a basic summary. Partly because I wanted to overcome my inertia, and partly because I wanted to start over.

What?

It is divided into 10 basic parts, which will be recorded later. We can start with an overview:

Then let’s look at the basic table of contents:

Entrance begins, uncovers Vue source code (a) ———— creation

Entry begins, interpretation of Vue source code (two) – New Vue story

Entry begins, read Vue source code (three) — initMixin first

Entry begins, read Vue source code (three) — initMixin next chapter

The entry begins with the interpretation of Vue source code (four) – to implement a basic Vue bidirectional binding

Entry begins, read Vue source code (five) – $mount internal implementation

$mount internal implementation – compile parse function generates AST

$mount internal implementation – compile optimize tag node

$mount – compile generate generates the render function

$mount internal implementation — render function -> VNode

Vue source code (10) – $mount internal implementation – patch

End?

Before and after the article was also summarized and sorted out by fragmentary time. Some of them were leafed through a lot of materials, and there were also paragraphs quoting giants, which were marked in the article. If not marked, I may have forgotten, welcome to remind. If there is a clerical error or incorrect explanation in the article, you are welcome to criticize and correct, and make progress together.

Finally:

Making the address

Source code demo