Preface is preparing some Vue series articles and videos recently. I have read the source code of Vue several times before, but I haven’t written any relevant articles, so I plan to write some recently.
The goal of this series of articles is to be proficient in the Vue stack source code.
The first will be from the Vue source interpretation, will produce a series of articles and videos, from detailed analysis of the source, to handwritten Vue 1.0 and Vue 2.0. After the output of the surrounding ecological related library source analysis and handwritten series, such as: VUex, VUE-Router, VUE-CLI and so on.
I believe that after this series of serious learning, we can write on their resume: proficient in Vue stack source code principle.
Suitable for people to skillfully use Vue technology stack for daily development (add, delete, change and check)
Want to know more about how the framework works
Students who want to change jobs or ask the boss for a raise
For a series of articles, it’s best to study them sequentially, but if you know something about the source code yourself or are particularly interested in a particular section, you can also read the corresponding article directly.
Many people use fragmented time to study. There is no problem with fast food articles, but if you want to learn more deeply, it is recommended to sit in front of the computer and study the whole block of time against the article.
Remember: the light does not practice false handle, so in the learning process must be hands on, do not move pen and ink do not read, such as notes, mind mapping, example code, for the source code to write comments, debug debugging, the on, absolutely not lazy.
If you find this series helpful, please like it, follow it, and share it with your friends.
The current version of Vue 2 is 2.6.12, so I used the current version of the code to analyze and learn.
Download the Vue source git command
Git clone github.com/vuejs/vue.g… Copy the code to Github for manual download and unzip
Install NPM I installation dependency, to be installed to the end to end testing tools can be directly CTRL + C off, does not affect the subsequent source code reading.
image.png
Source map Add –sourcemap to the dev command in package.json -> scripts so that you can see where the current code is in the source code while debugging it in the browser.
{ “scripts”: { “dev”: Rollup -w -c scripts/config.js –sourcemap –environment TARGET:web-full-dev”}}
If the copy code NPM run dev displays the following results and generates the vue.js.map file in the dist directory, it indicates success. At this point, all the preparatory work is done, but do not CTRL + C the current command line, because you will need to add comments to the source code, or even change the source code, the current command can monitor the source code changes, if found changes will be automatically packaged; If you close the current command line, you’ll notice that as you annotate your code, you’ll see deviations from the source mapping when debugging it in the browser. So don’t turn it off for a better debugging experience.
image.png
The dist directory contains a bunch of vue.*.js files with special names.
UMD CommonJS ES Module Full vuue.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.com mon. Prod. Js nouns explain Full: this is a Full package of contain the compiler (compiler) and runtime (runtime).
Compiler: Compiler that compiles template strings (that is, the template code you write for htML-like syntax) into the render function of JavaScript syntax.
Runtime: Responsible for creating Vue instances, rendering functions, patch virtual DOM and other code, basically all the code except compiler belongs to Runtime code.
UMD: compatible with CommonJS and AMD specifications, vue.js introduced through CDN is the UMD specification code, including compiler and runtime.
CommonJS: Typical applications such as nodeJS, CommonsJS specification packages are intended for use with older packers such as Browserify and WebPack 1. Their default entry file is vue.runtime.common.js.
ES Module: Modern JavaScript specification, the ES Module specification package is for modern packagers like WebPack 2 and Rollup. By default, these packagers use the vue.runtime.esm.js file that contains only the runtime.
Runtime + Compiler vs. If you need to compile a template dynamically (for example, passing a string template to the template option, or writing an HTML template by providing a mount element), you will need a compiler, and therefore a complete build package.
When you use vue-loader or Vueify, templates in the *. Vue file are compiled into JavaScript rendering functions when they are built. So you don’t need to include the full package of the compiler, just use a package that contains only the runtime.
A package that contains only run-time is 30% smaller than a full package. So try to use a package that contains only the runtime. If you need to use a full package, you need to do the following:
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’})]}) Add Browserify to your project’s package.json:
{/ /… “Browser “: {“vue”: “vue/dist/vue.common.js”}} Copy code source directory structure by reading the directory structure, to have a general understanding of the source code, know what things need to go where to see.
├─ Too heavy, too heavy, too heavy, too heavy, too heavy, too heavy Vue-server-renderer, vue-template-compiler used with vue-loader And related weex │ ├ ─ ─ vue – server – the renderer │ ├ ─ ─ vue – the template – the compiler │ ├ ─ ─ weex – the template – the compiler │ └ ─ ─ weex – vue – framework ├─ SRC vue source directory │ ├── Compiler │ ├─ Core │ │ ├─ Components │ ├─ Components │ ├─ SRC Vue source directory │ ├─ Core │ │ ├─ Components Keep-alive │ ├─ config.js │ ├─ global-API │ ├─ global-API │ ├─ global-API │ ├─ global-API │ ├─ ├─ Vue. Use (), Vue.com (), etc. For example Vue constructor is this directory │ │ ├ ─ ─ the observer reactive principle │ │ ├ ─ ─ means util │ │ └ ─ ─ vdom virtual DOM, │ │ ├─ Web │ ├─ weex │ ├─ Server ├─ Types TS │ ├─ Web │ ├─ web │ ├─ Weex │ ├─ Server ├─ Types TS Type declaration copy code matching video Vue source code interpretation (1) – preface
Welcome to pay attention to my nuggets account and B station, if the content 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) – responsive principle
Vue source code interpretation (4) – asynchronous update
Vue source code interpretation (5) – global API
Vue source code interpretation (6) – instance method
Vue source code interpretation (7) – Hook Event
Vue source code interpretation (8) – compiler parsing
Vue source code interpretation (9) – compiler optimization
Vue source code interpretation (10) – compiler to generate the rendering function
Vue source code interpretation (11) – Render Helper
Vue source code interpretation (12) — Patch
The article classification