As usual, let’s start with a few questions:

  1. There are several trees, or tree structures, in the running instance of Vue. For example, there is a Dom tree. Of course, since Vue uses the virtual Dom, there is also a VNode tree structure.
  2. What is the relationship between these tree structures in Vue? How is it connected?
  3. In a Vue instance with many components and a large number of VNodes, how can measurement performance be evaluated if, for example, updating only a small variable of the highest-level component affects those Vonde diff’s?
  4. Compare the mechanism of Vue slot with that of Web Component.

The following three sources can answer the above questions.

Vue technology Insider:

Vue technology insider: Hcysun. Me/VUE-design /

Vue technology Revealed:

Vue technical disclosure: ustbhuangyi. Making. IO/Vue – analysi…

Vue source code learning:

Vue source learning: blog. Windstone. Cc/Vue/source -…



Many of the details are provided exclusively. Unfortunately, the content is not complete and does not cover componentization in detail. Some of Vue’s difficulties, such as slot mechanics, are not described.

The author of Vue technical disclosure is a big man of Vue. He wrote it very early and has a supporting video course. The content is very complete, and all the points in Vue are involved.

The above two source code parsing information should be the most well-known, are worth learning again.

I feel the most underrated is the third learning material Vue source learning, I may not know, from the number of star on Github, not high popularity, but the content is really great.

Continuously updated..