Vue Source Code Interpretation (1) - Preface

When learning becomes a habit, knowledge becomes common sense. Thank you for likes , favorites and comments .

New videos and articles will be sent on the WeChat public account as soon as possible, welcome to follow: Li Yongning lyn

The article has been included in the github repository liyongning/blog . Welcome to Watch and Star.

cover

Introduction

The first part of the column mainly introduces the purpose, planning, suitable population of the column, as well as the basic knowledge of preparation and literacy.

foreword

Recently, I am preparing some articles and videos of Vue series. I have read the source code of Vue several times before, but I have never written related articles, so I plan to write one recently.

Target

Mastering the source code principles of the Vue technology stack is the ultimate goal of this series of articles.

First, it will be interpreted from the Vue source code, and a series of articles and videos will be produced, from the detailed analysis of the source code, to 手写 Vue 1.0and Vue 2.0. After that, source code analysis and handwriting 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 study, everyone can write this one on their resume: Proficient in the source code principle of the Vue technology stack .

suitable for the crowd

• Proficient in using Vue technology stack for daily development (add, delete, modify and check)

• Want to understand the framework implementation principle in depth

• Students who want to change jobs or raise their salary with the boss (adding, deleting, modifying and checking are worthless)

how to learn

For a series of articles, sequential learning is naturally the best, but if you have some understanding of the source code or are particularly interested in a certain part, you can also directly read the corresponding articles.

Many people are accustomed to using fragmented time to study. Of course, there is no problem with fast food articles. However, if you want to study in depth, it is recommended to sit in front of the computer and use the whole piece of time to learn by yourself.

Remember : you can't practice the fake handle just by looking at it, so you must be diligent in the learning process, not writing or reading, such as notes, mind maps, sample codes, writing comments for source code, debugging debugging, etc. , must not be lazy.

If you think this series of articles is , follow , and share it with your friends.

Prepare

Now the version number of the latest Vue 2 is 2.6.12, so I will analyze and learn with the current version of the code.

Download Vue source code

• git command

git clone https://github.com/vuejs/vue.git

• Go to github to manually download and unzip

Dressing

Execute the npm iinstallation dependencies, which can be ctrl + cremoved directly when they are installed into the end-to-end test tool, without affecting the subsequent study of the source code.

source map

Add to the dev command in package.json -> scripts --sourcemapso that 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"
  }
}

Development and debugging

Execute the following command to start the development environment:

npm run dev

If you see the following effect distand generate a vue.js.mapfile in the directory, it means success. All the preparatory work has been completed here, but do not delete the current command ctrl + cline , because you will need to add comments to the source code or even change the source code when reading the source code. The current command can monitor the source code changes, and if any changes are found, they will be automatically performed. Packaging; if you close the current command line, you will find that as you write the commented code, there will be deviations from the source map when debugging the source code in the browser. So don't turn it off for a better debugging experience.

Literacy

After executing the npm run buildcommand , you will find that dista bunch of specially named vue.*.jsfiles What do these special names mean?

Build file classification

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

Glossary

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

• Compiler : The compiler is responsible for compiling the template string (that is, the template code of the html-like syntax you wrote) into the render function of the JavaScript syntax.

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

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

• CommonJS : Typical applications such as nodeJS, the CommonsJS specification bundles are intended for use by older bundlers like browserify and webpack 1. Their default entry file is vue.runtime.common.js.

• ES Module : The modern JavaScript specification, the bundles of the ES Module specification are for use by modern bundlers like webpack 2 and rollup. These packers use the runtime-only vue.runtime.esm.jsfiles .

Runtime + Compiler vs. Runtime-only

If you need to compile templates dynamically (eg: pass string templates to templateoptions , or write html templates by providing a mount element), you will need the compiler, and therefore a full buildpack.

When you use vue-loaderor vueify, *.vuethe templates in the file are compiled into JavaScript render functions at build time. So you don't need the full package that contains the compiler, just use the package that only contains the runtime.

The runtime-only package is 30% smaller than the full package. So try to use packages that only contain runtime. If you need to use full packages, then you need to configure as follows:

webpack

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

Rollup

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

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

Browserify

Add to your project's package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Source directory structure

By reading the directory structure, you can have a general understanding of the source code and know what to look for.

├── benchmarks                  性能、基准测试
├── dist                        构建打包的输出目录
├── examples                    案例目录
├── flow                        flow 语法的类型声明
├── packages                    一些额外的包，比如：负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler，还有 weex 相关的
│   ├── vue-server-renderer
│   ├── vue-template-compiler
│   ├── weex-template-compiler
│   └── weex-vue-framework
├── scripts                     所有的配置文件的存放位置，比如 rollup 的配置文件
├── src                         vue 源码目录
│   ├── compiler                编译器
│   ├── core                    运行时的核心包
│   │   ├── components          全局组件，比如 keep-alive
│   │   ├── config.js           一些默认配置项
│   │   ├── global-api          全局 API，比如熟悉的：Vue.use()、Vue.component() 等
│   │   ├── instance            Vue 实例相关的，比如 Vue 构造函数就在这个目录下
│   │   ├── observer            响应式原理
│   │   ├── util                工具方法
│   │   └── vdom                虚拟 DOM 相关，比如熟悉的 patch 算法就在这儿
│   ├── platforms               平台相关的编译器代码
│   │   ├── web
│   │   └── weex
│   ├── server                  服务端渲染相关
├── test                        测试目录
├── types                       TS 类型声明

Link

• Supporting video, pay attention to WeChat public account Reply : "Proficient in Vue technology stack source code principle video version" Get
• Proficient in Vue technology stack source code principle column
• github repository liyongning/Vue welcomes Star

Thank you for all: likes , favorites and comments , see you in the next issue.

---

When learning becomes a habit, knowledge becomes common sense. Thank you for likes , favorites and comments .

New videos and articles will be sent on the WeChat public account as soon as possible, welcome to follow: Li Yongning lyn

The article has been included in the github repository liyongning/blog . Welcome to Watch and Star.

{{o.name}}

{{m.name}}