Writing in the front

Recently, I took some time to read the source code of VUe-next/Runtime-core one by one. During this time, I sorted out a lot of notes, but they were fragmented. Originally wanted to sort out, write an article to share, but felt that the final results can only be a huge length of the analysis of the text, even if I annotate the source code line by line, its reading experience will be very poor, because everyone read code habits are different, different ideas. Is the so-called throw a brick to attract jade, so, I feel to write a guide as this brick should be enough, I hope to help to want to see the source code but feel unable to see, do not know how to start readers.

On the other hand, it’s kind of digging a hole for yourself, because a lot of what’s involved in this article can’t be explained in a few words, which means that other articles will have to be written later to fill in the gaps. I try to put together as many cohesive modules as possible, and then share them. I try to improve the quality of the article by avoiding the situation of listing code.

Reading notes I hosted on the wordfinch, if you don’t want to mess it up, you can read them here.

The preparatory work

Work to good its things, must first sharpen its tools, to see the source, take tablet to see certainly is not (of course, also do not exclude cattle). All you need is an editor that supports code hopping. I use VSCode, but if you use VIM, Sublime will do.

In addition, some reserve knowledge is required:

  • Because it’s readingvue-nextCode, and ispre-alphaThe version that this requires you to be on beforevueHave a certain understanding, if it is the first contact, I feel the meaning of reading the source code is not very great
  • Need proficiencydebugThe basic skills and processes throughdebugThere are two benefits to looking at code in this way
    • The debug process has a clear call stack log
    • The variables under various scopes are clear at a glance
  • The need totypescriptSome degree of control, at least to knowinterface,enumConcepts such as

How to read

There are generally three ways:

  • Look directly
  • Executable code that passes unit tests
  • Self-written executable code

The second option is recommended because unit tests are maintained by the official team and the quality is guaranteed, and unit tests are generally simple and annotated, which helps us understand the code.

Vue-next uses jest for unit tests, so you can install the jest plug-in in vscode. It supports the debug lens shortcut to directly debug a unit test.

Note, however, that you configure a custom option:

"jest.debugCodeLens.showWhenTestStateIn": [
    "fail"."unknown"."pass", // notice here]Copy the code

The “pass” indicates that the Debug Lens is displayed above even if the unit test passes. By default, the Debug lens is not displayed if the unit test case passes.

Module function induction

There are multiple files in the Run-time core directory, so I’ll treat each file as a submodule for the moment. The code quality of VUE is still good, and the coupling between modules is not particularly high. Because of this, basically each module has its own corresponding unit test file.

When I was looking at it, I was basically looking at unit tests of each module, and then during debugging, I would take the initiative to jump through some code to see the implementation details. The following are some summaries and generalizations of the functions of all modules in this directory under the current latest code.

There are a few more individual modules that I haven’t looked through yet, but it doesn’t affect the overall source-reading process, so I’ll come back to supplement these todos later when I work on these individual modules separately.

publicapirelated

Modules that implement the public API are named in a format like APIxxx, as follows:

  • apiApp.ts: There are three more important interfaces to look at,App,AppConfig 和 AppContext, if forvue2If you’re familiar with it, it’s easy to understand.createAppIs a factory method that returns a matchAppAn object whose internal methods are bound by an interfaceAppContextInterface to interact with objects constrained by.
  • apiCreateComponent.ts: This file contains multiple internal values forcreateComponentOverloading declarations for function signatures should exist to help TS provide better type inference to improve the development experience.
  • apiInject.ts: Component dependency injectionfeatureThe implementation of logic, implementation is very simple, direct andcomponentIt was exposed in the filecurrentInstanceVariables interact to achieve inheritance, assignment, value and other logic
  • apiLifecycle.ts: New component declaration cyclehooks, basically seeinjectHookThe method will do. HeretargetPoint by defaultcurrentInstance, and then some callback logic is cachedcurrentInstanceInstance of the declaration cycle callback function array
  • apiOptions.ts: contains the value forcomponentHow to parseoptionsThe implementation of logic, the code is relatively long but also more complex, coupling and other several files higher. But it’s not really necessary to go through all the code inside it, becauseoptionsThe parsing logic for each paragraph is independent of the other and can therefore be specific to oneoptionTo look at the internal parsing logic, I’ve only looked at it so fardataAs well aslifecycle.
  • apiReactivity.ts: is thereactivityIn the packageapiRe – export, nothing extra
  • apiWatch.ts: I haven’t looked at it carefully yet, but according to the name, it’s andwatchThe relevantapiAfter a cursory look, the coupling is low, so you can look at it later

Component related

  • component.ts: mainly contains how to create an internal component instance of the logic, the code is relatively long, but if you look at it, you will find that it is actually calling other modules exposed API, the logic itself is relatively simple. Note that this file will expose a pairsetCurrentInstance 和 getCurrentInstanceMethods are used to maintaincurrentInstanceVariable, and it will be used in other modules
  • componentProxy.ts: a statementrender proxyThe implementation logic of thisproxyIs responsible for how the external interacts with the internal component instance, think of it as an external component instance
  • componentProps.ts: the main seeresolveProps, how does the implementation parse the various forms ofprops
  • componentSlots.ts: the main seeresolveChildren, how does the implementation parse the various forms ofchildrennode
  • componentRendererUtils.ts: some render componentsutilMethod, according to the name to understand the meaning of each method
  • createRenderer.ts: This has a low coupling with other files and can be understood asVNodeCan render in any context, as long as its interface is implemented, such as applets,native,canvasOr memory environment, how to write onerendererDirectly, seeruntime-testorruntime-domThe code for
  • directives.ts: Instruction-related interiorapi, the current version of the code, which can be manytodoSo you can come back later

other

  • errorHandling.ts: Error handling related, I haven’t looked at it carefully yet
  • scheduler.ts: The job scheduler is related, and I haven’t looked at it carefully yet
  • shapeFlags.ts: and the components themselveschildrenType enumeration declarations and constants
  • suspense.ts: suspenseRelevant, haven’t seen it yet, for other filessuspenseI was completely following the logicreactI did not encounter any obstacles at the moment
  • warning.ts: Warning related, mostly util methods, by name

Recommended reading order

Speaking directly about my own reading order, I think it is relatively consistent with cognitive habits:

  • See firstvnode.ts 和 h.tsSuch as onvdomLook at the new codeVNodeData structure of
  • And then seeapiApp.tsHow is the mounting processVNodeAssociated with the rendering context, this process naturally involves a variety ofapixxx.tsIt would be nice to look at them one by one
  • Because what WE saw before is publicapiIf you need implementation details, look furthercomponent.ts, which mainly contains the data structure of the internal component instance and the creation process, again, the break point reads line by line
  • For some parsing, tool methods, you can see the implementation details at the end of the process, there is no need to explore the end of the process, because some method names can be very clear behind the implementation of the logic is what

Code will encounter during the period of suspense, lifecycle, this kind of code can also be read as a separate content, look at the very beginning, also can not be too obsessed with detail, when have a probably understanding of whole process then in retrospect will clear a lot, then I will pack a special article is how to achieve this.

Write in the last

Although the vuE-Next code is still in the early stage, the overall reading experience is good, with a clear structure and high readability. Some key modules are also annotated. The only deficiency is that many places still use the AS keyword to conduct type assertion. I think there’s probably a better way to do type inference in these places.

Focus on full stack _101, only talk about technology, not life

Another: all kinds of scale full stack outsourcing projects, interested in private chat