preface

Recently in the preparation of some Vue series of articles and videos, Vue before the source code has read several times, but has not written relevant articles, so recently planned to write a write.

The target

Proficient in Vue technology stack source principles, this is the ultimate goal of this series of articles.

First of all, it will read the Vue source code, which will produce a series of articles and videos, from detailed analysis of the source code, to handwritten Vue 1.0 and Vue 2.0. After that, source code analysis and handwritten series of surrounding ecological related libraries will be produced, such as vuex, VuE-Router, Vue-CLI, etc.

I believe that after this series of serious learning, we can write on their resume such a: proficient in Vue technology stack source principle.

Suits the crowd

• Familiar with Vue technology stack for daily development (add, delete, modify and check)

• Want to learn more about the framework implementation

• Students who want to change jobs or ask their boss for a raise.

How to learn

For a series of articles, it’s best to learn them sequentially, but if you have some knowledge of the source code yourself or are particularly interested in a particular section, you can read the corresponding articles directly.

Many people are used to using fragmented time to learn, for fast food articles of course is no problem, but if you want to further study, or recommend sitting in front of the computer with a block of time to learn against the article by yourself.

Remember: only see not practice false handle, so in the process of learning must be frequently start, do not move ink and not read, such as notes, mind mapping, sample code, write comments for the source code, debug debugging, the on, absolutely can not be lazy.

If you find this series helpful, please like it, follow it, and share it with your friends.

To prepare

The latest version of Vue 2 is 2.6.12, so I will analyze and study the current version of the code.

Download the Vue source code

• The git command

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

• Go to Github and download it manually and unzip it

To pack

Execute NPM I installation dependency, to be installed to the end to end test tool can be directly CTRL + C off, does not affect the follow-up source reading.

source map

Add –sourcemap to the dev command in package.json -> scripts so you can see where the current code is in the source code when debugging the source code in the browser.

{
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"}}Copy the code

Development and debugging

Run the following command to start the development environment:

npm run dev
Copy the code

Success is indicated when the following effect is seen and the vue.js.map file is generated in the dist directory. All the work is done here, but don’t CTRL + C off the current command line, because when you read the source code, you will need to add comments to the source code, or even change the source code. The current command can monitor the changes in the source code, and if you find any changes, it will be automatically packaged. If you close the current command line, you will notice that as you comment code, debugging the source code in the browser will cause deviations from the source code mapping. So don’t turn it off for a better debugging experience.

literacy

After running the NPM run build command, you will find a bunch of specially named vue.*.js files in the dist directory. What do these specially named files mean?

Build file classification

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js	vue.common.prod.js
Runtime-only (production)	vue.runtime.min.js	vue.runtime.common.prod.js

Noun explanation

• Full: This is a Full package, including the compiler and runtime.

• Compiler: the Compiler that compiles the template strings (that is, the template code you write that resembles HTML syntax) into JavaScript syntax’s Render functions.

• Runtime: Is responsible for creating Vue instances, rendering functions, patch virtual DOM and other code, basically except the compiler code belongs to the Runtime code.

• UMD: Compatible with CommonJS and AMD specifications, vue.js is the code of the UMD specification, including compiler and runtime.

• CommonJS: Typical applications such as nodeJS, CommonsJS specification packages are intended for older packagers such as Browserify and WebPack 1. Their default entry file is vue.runtime.mon.js.

• ES Module: modern JavaScript specification. The ES Module specification has packages for modern packers like WebPack 2 and Rollup. By default, these packagers use the ue.runtime.esm.js file that contains only the runtime.

Runtime + Compiler (Runtime) vs. Contains only run-time (Runtime only)

If you need to compile templates dynamically (for example, passing string templates to the template option, or writing HTML templates by providing a mount element), you will need a compiler and therefore a complete build package.

When you use vue-loader or vueify, the templates in the *.vue file are compiled as JavaScript rendering functions at build time. So you don’t need a full package that contains the compiler, you just need a package that contains only the runtime.

Packages that contain only run-time are 30% smaller than full packages. So try to use packages that contain only the runtime. If you want to use the full package, you need to configure the following:

webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'}}}Copy the code

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'})]})Copy the code

Browserify

Add to your project’s package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"}}Copy the code

Source directory structure

By reading the directory structure, you can get a general understanding of the source code and know what needs to be looked at where.

A list of output benchmarks for building packares.A list of examples..flow.type declarations of the flow..syntax..packages Some additional packages, such as: The vue-server-renderer package for server-side rendering, the Vue-template-compiler used with the Vue-Loader, ├── Weex-Template-Compiler │ ├─ Weex-Template-Compiler │ ├─ Weex-Vue-Framework │ ├─ ├─ Weex-Template-Compiler │ ├─ Weex-Vue-Framework │ ├─ SRC vue source directory │ ├── Compiler │ ├─ core Core package for runtime │ ├─ Components Global components │ │ ├── config.js │ │ ├── global-api │ ├─ Example Vue, vue.ponent () │ ├─ Example Vue, │ ├─ Exercises │ ├─ Exercises │ ├─ Exercises │ ├─ Exercises │ ├─ Exercises │ ├─ Exercises │ ├─ Exercises Such as familiar patch algorithm here │ ├ ─ ─ platforms platform-dependent compiler code │ │ ├ ─ ─ web │ │ └ ─ ─ weex │ ├ ─ ─ server side rendering service related ├ ─ ─ the test test directory ├ ─ ─ types TS Type declarationCopy the code

Form a complete set of video

Vue source code interpretation (1) – preface

Please focus on

Welcome everyone to follow my gold mining account and B station, if the content has to help you, welcome everyone to like, collect + attention

link

• Vue source code interpretation (1) – preface

• Vue source code interpretation (2) — Vue initialization process

• Vue source code interpretation (3) – response principle

• Vue source code interpretation (4) — asynchronous update

• Vue source code Interpretation (5) — Global API

• Vue source code interpretation (6) — instance method

• (7) — Hook Event

• Vue source code interpretation (8) — compiler parsing

• Vue source code interpretation (9) — compiler optimization

• Vue source code interpretation (10) — compiler generation rendering function

• (11) — Render helper

• Vue source code interpretation (12) — patch

Learning exchange group

link