Written in the beginning

Many people may ask: The Internet aboutvuejsSo many articles, why do you have to write it again.

Yes, it is true that vuejs related to the source of the article is very much, but many key points seem to be a brush over, do not understand nature or do not understand. Source code is a knowledgeable teacher, is how many people how many years of accumulation of knowledge precipitation, reading source code is dialogue with the high, is to improve their biggest shortcut. Other people write articles, that is the accumulation of others, understand and express are completely different things. Source code is also very worth reading dozens of times, each look will have a different harvest. Learning is like visiting a scenic spot, enjoying along your own route and sharing the scenery you see. Everyone has his own feelings, feel others can not feel the mood. If you don’t experience it yourself, you can only experience it from someone else’s mouth.

Table of contents and document description

As always, the first step in reading the source code is to clone a copy of the latest code on Github. It is necessary to make clear the directory structure and why each file is used before reading. It does not matter if you do not know how to work now, but you must first understand the role of each file.

Detailed catalog introduction:

├ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- core directory source address, the first thing we need to understand (important! Important! Important!) │ ├ ─ ─ the compiler -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the compiler code storage directory, The class HTML (template) compiled to render function │ ├ ─ ─ the core -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- general storage, Platform-independent code │ │ ├ ─ ─ components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- vue bring virtual component KeepAlive │ │ ├ ─ ─globalAPI -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue global static constructor mount, attribute │ │ ├ ─ ─ the instance -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue constructor, The key to that is, when the initialization code │ │ │ ├ ─ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue initialization entry (other files can be ultimately, The next section main anatomical) │ │ ├ ─ ─ the observer -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- reactive principle of key location (watcher, array to monitor, depth monitoring, etc.) │ │ ├ ─ ─ util -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Means pure functions or attributes │ │ ├ ─ ─ vdom -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the key to create a virtual DOM, comparative patching code │ ├ ─ ─ platforms -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Contains platform-specific code, different platforms of different building entrance files here also │ │ ├ ─ ─ web -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the web platform │ │ │ ├ ─ ─ entry - runtime. Js -- -- -- -- -- -- -- -- -- -- the runtime version, │ │ ├─ Entry-Runtime - - No template to render functionwith- Compiler.js -- build-time version, │ │ ├── Entry-Server-renderer.js │ │ ├── Entry-server-renderer.js --------- Vue-template-Compiler package │ │ ├─ Entry-server-basic.js - Output packages/ Jue-server-renderer /basic.js file │ │ ├─ Entry-server-basic.js │ ├ ─ ─ weex -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - adaptation third-party weex related documents (temporary) is beyond the scope of our discussion │ ├ ─ ─ server -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the server related │ SSR rendering ├ ─ ─ SFC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - contains a single file components (.) vue file parsing logic │ ├ ─ ─ Shared -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- general utility methods such as ├ ─ ─ dist -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build package files output directory ├ ─ ─ examples -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue development example ├ ─ ─ a flow ---------------------------------- type declaration, [Flow] the open source project ├ ─ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- hold separate package directory ├ ─ ─ scripts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Rollup packages build configurations. If you don't want to know about rollup packaging for a while, Temporary understanding can │ ├ ─ ─ git - hooks -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the git hooks directory │ ├ ─ ─ alias. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - alias configuration │ ├ ─ ─ config. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- a rollup configuration file │ ├ ─ ─ build. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - to config. All the rollup in the js configuration to build │ ├ ─ ─ ci. Sh -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- a continuous integration script running │ ├ ─ ─ the sh -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- used to automatically release the new version of the script ├ ─ ─ the test -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- unit test file ├ ─ ─ package. The json -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- resources depend on the configuration of ladle ├ ─ ─ yarn. The lock -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- yarn configuration lock file ├ ─ ─ the editorconfig -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- for the editor's coding style profile ├ ─ ─ the flowconfig -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- flow configuration file ├ ─ ─ the babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Babel compiler configuration file ├ ─ ─ the eslintrc -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- eslint configuration file ├ ─ ─ the eslintignore -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- eslint ignore configuration ├ ─ ─ the gitignore ---------------------------- git commit ignore configuration filesCopy the code

That’s about it. This series of articles will focus on the source code in the SRC directory, and we’ll benefit from a complete understanding of the logic. The rest will look familiar until you understand the contents of the SRC folder.

compiler

All the compile-related code in the source code is included here. What is compilation? Render the class HTML in the Template into an AST abstract syntax number, which simply describes your HTML structure in JSON files. The code in this folder is mainly used to parse templates into AST syntax trees online, but compilation in general is very performance intensive and we do not recommend real-time online compilation. However, the actual development is generally based on webpack scaffolding, which has been compiled offline with webpack, vue-Loader and other plug-ins during build, so what is actually obtained is the compiled JSON description of HTML structure, and has been packaged into the corresponding JS file.

core

This directory is the core of the core, which needs to be understood. The core code of Vuejs is all here, including built-in virtual component Keep-Alive, encapsulation of global API, VUE instantiation process, data responsive principle, virtual DOM and common utility functions, etc. The essence of knowledge is definitely worth savouring, considering how many years it took author Judah to form this logic after reading various open source libraries.

platforms

Platform entrance, including web platform entrance and WEEX entrance. Weex is the front end of the extreme expansion of that few years, with the trend of the merger of IOS and Android ali open source with a set of JS driven native framework, the author in 2017 useful WEEX developed a “order comment module”, support online update, the experience is pretty good. Unfortunately, Weex was donated to the Apache Foundation and died halfway, so I don’t want to do too much analysis here.

server

The logic related to server-side rendering is all here. It mainly renders the synthesized HTML code on the server side, directly to the browser to render, most of the logic is done on the server side. This part of the code runs in the Node.js environment and is not covered in this series.

sfc

It contains only one file, parser.js. We usually develop.vue files, called SFC(Single File Components). Vue will disassemble the.vue files first, mainly divided into template, script and styles parts. Js and.css files that can be parsed by the browser.

shared

Some other common tool methods defined.