Project preparation

Pull the VUE code to the local repository and switch to V2.6.11:

git clone https://github.com/vuejs/vue.git
git checkout v2.6.11
Copy the code

Go to the root directory of the vue folder to install dependencies:

yarn
Copy the code

The directory structure

Ignore. Babelrc., js, editorconfig conventional project files, such as only introduce vue related.

├ ─ benchmarks// Benchmark data, some demo to test performance, for comparison with competing frameworks├ ─ dist// Different versions of Vue files output after the build├ ─ examples// Use Vue to write some small demo├ ─ flowFlow Static type declaration file├ ─ packages// Build the output server rendering, template compiler, WEEX related NPM package├ ─ scripts// Store scripts executed by NPM scripts for project compilation, testing, and construction.├ ─ SRC/ / core│ ├ ─ compilerTemplate ->render();│ ├ ─ codegen// AST to render()│ ├ ─ directives// The instructions to process before render() is generated│ ├ ─ parser// Template resolves to AST│ ├ ─ codeframe. Js// Export generateCodeFrame to format the console template│ ├ ─ the create - compiler. Js// Export createCompilerCreator to return createCompiler│ ├ ─ the error - detector. Js// Check AST for errors│ ├ ─ helpers. Js// Some help methods for compiling│ ├ ─ index. Js// Export the createCompiler method that returns compile and compileToFunctions│ ├ ─ optimizer. Js// mark static nodes for reconstruction optimization│ └ ─ tofunction. Js/ / export createCompileToFunctionFn for return compileToFunctions│ ├ ─ the core// Core code, including built-in components, global API encapsulation, Vue instantiation, observer, virtual DOM, utility functions, etc.│ ├ ─ components// Built-in component definition, currently containing keep-alive│ ├ ─ global - API/ / global API definition, such as Vue.com ponent, Vue. The use of Vue. The extend of Vue. Mixin, etc│ ├ ─ the instance// instantiate related content, lifecycle definitions, events, etc│ ├ ─ the observer// Data listening, bidirectional data binding, subscription center Settings, etc│ ├ ─ util// Tool methods│ ├ ─ vdom// Virtual DOM related│ ├ ─ config. Js// Basic configuration│ └ ─ index. Js/ / export Vue│ ├ ─ platforms// Cross-platform correlation│ ├ ─ web/ / web side│ ├ ─ compiler// Create createCompiler baseOptions, export compile, compileToFunctions│ ├ ─ the runtime// Mount some new directives, components, config, __patch__, $mount, etc on Vue│ ├ ─ server// Server render│ ├ ─ util// Tool methods│ └ ─ XXX. Js// 5 entry js, different builds call different methods│ └ ─ weex/ / weex related│ ├ ─ server// Server render (SSR)│ ├ ─ SFC// Single file component parsing (*.vue)│ └ ─ Shared// Globally shared constants, methods├ ─ test// Test case├ ─ types// typescript type declaration files

Copy the code

Some explanation of the directory

dist

There are more than 10 different versions of VUE files under DIST, which are built based on different specifications (including CommonJS specification, ES Module, UMD), compiler inclusion and different environments.

Refer to documentation for details

flow

Like TypeScript, Flow is facebook’s JavaScript static type checker. Vue.js source using Flow to do static type checking.

packages

The following NPM packages can be compiled by executing the command corresponding to NPM script.

vue-server-renderer

Vue. Js used for server-side rendering (SSR).

vue-template-compiler

Vue-template-compiler is usually used with vue-loader to precompile single-file components (SFCs) into rendering functions.

Ue-template-compiler is passed as a compiler in the vue-loader/lib/index.js parse method (where compiler.parsecomponent is called) to get descriptor, Import requests for different modules can be generated according to Descriptor, and then the original import request is converted to a new import request by pitcher. Js is executed according to the new import request to transform different modules. Of the template execution templateLoader. Js to rely on when the vue – the template – the compiler provides compiler.com running method resolution.

Vue – loader parsing

weex-template-compiler

Weex related (skipped)

weex-vue-framework

Weex related (skipped)

weex

Weex is a framework for developing high performance native applications using popular Web development experiences, integrated with the runtime version of Vue.

Loading process Reference: Loading process of Weex. This section describes the working principle of Weex

sfc

SFC is a Single File Component. Run the parseComponent method exported from parse.js in SFC to get an SFCDescriptor object. The file will eventually be packaged into vue-template-Compiler.

test

There are two test tools: Karma and Jasmine.

Start debugging

Vue uses rollup as a build tool.

NPM scripts dev command, add –sourcemap to the end of the command, and run:

npm run dev
Copy the code

The vue.js and vue.js.map are generated in dist, and the HTML file is added anywhere. The script tag introduces the newly generated vue.js, and the vue code is written to break into the source code when opened in the browser instead of the packaged code.

Program entrance

Dev command corresponding to the TARGET for the web – full – dev, namely the corresponding platform entrance for platforms/web/entry – the runtime – with – compiler. Js, introduce the file:

import Vue from './runtime/index';
Copy the code

This file introduces Vue from core/index(which in turn introduces Vue from./instance/index, which initializes items of Vue and extends prototypes by passing Vue as parameters (mixins), and makes platform-specific customizations. Such as extended vue.options. directives, Vue.options.components. Prototype: $mount; prototype: $mount; That $mount calls the mountComponent in Core/Instance /lifecycle.

Back to the entry-runtime-with-Compiler. js analysis, continue to introduce:

import { compileToFunctions } from './compiler/index';
Copy the code

Execute in this file:

const { compile, compileToFunctions } = createCompiler(baseOptions);
Copy the code

CreateCompiler is an export of compiler/index, which is used to create the compiler. We pass the platform-specific parameter baseOptions to compile, compileToFunctions. CompileToFunctions convert template to render functions.

$mount ($mount) {var. Prototype $mount ($mount); We then assign to compileToFunctions to vue.compile and export Vue.

The demo analysis uses the compiled VUE

Since the demo will involve component import and other modules, the webpack is used and vue is introduced as an NPM package, which means that breakpoints will be put into the compiled Vue JS and subsequent analysis will be done in that file.