Vue源码思考（一门外观望，屋里这么热闹弄啥哩）

Posted 2021-04-16 未来大前端

Vue3.0的Alpha预览版已经发布，完整版很快也会出来，前端项目又要升级了，前端同学又要学习了。你还学得动吗？如何应对快速迭代升级的前端框架库？读源码。

还记得上学时老师说过，要理解记忆，把书读薄。现在想来真是说的太对了。我们把vue源码看明白，然后把它串联起来。那我们学习vue的使用方法和文档时，会很快的理解为什么要这么用。而且，读源码，领悟作者巧妙的思想、设计模式、编码规范，对于我们基础能力的提升也是大有益处的。

vue的v2.6.10版本是v3.0正式可以使用前（预计到2020年了）的最新稳定版本，研究分析它，我们可以更快的熟悉v3.0的更新点和更新原因。

1、获取vue项目源码

如上图，可以看到完整项目比我们平时使用vue开发项目时下载到的vue模块要多很多内容。

顺路看下我们平时使用的：

 

即使我们下载到这些文件，我们平时开发web应用时也只是使用dist下的文件和types下的文件,types下也不常用，那是对开发typescript语法的web项目的支持。这里面的src文件夹就是，vue的核心代码块的源码。虽然我们开发应用时也没用上src，作者也把src下的它们放进去，大概也是想让我们更多的了解参考下源码吧。这就是开源的精神啊。

2、源码项目结构分析

前面下载到了完整的源码项目，那目录下那么多文件夹都是做啥用的哈？这个疑问肯定已经在大家心里了。

先大概逐一介绍下，不进行太深入的解析，因为我们本文宗旨是门外观望，太深入钻牛角尖的话，他的复杂度会把我们吓跑的。我们后面逐层剥玉米解析，逐步深入，让复杂的问题水到渠成，迎刃而解。

 

这是CI持续集成相关，里面有持续集成的配置文件，CI对于项目开发的好处是会节省很多测试阶段的发布流程，有兴趣的同学可以去百度CI和CD了。vue作为先进的前端库，他的自身的产生过程，也使用了很多先进的思想、工具、流程等。

 

里面是Vue在github上被大家拉取分支、开发贡献、请求作者合并代码、提出问题等的一些规范和说明。

 

里面是使用vue开发的一些特殊例子，大家可以看到vue性能和兼容测试的试验结果。

 

这里面是对vue源码进行打包好后的文件，类似于我们开发应用时的dist，包含多种版本，前面也说了，我们平时开发web应用引用的vue库就在里面。

 

看名字就知道了，一些使用vue开发的简单demo页面。

 

这个很关键，一个概念要理解，就是静态类型检查，js本身是弱类型语言，java是强类型语音。尽管js不强制我们严格类型使用，但是开发大型项目时，变量等的类型不确定性会让我们很头疼，出现不易排查的问题，因此静态类型检查对于发现和排查这些问题很有用。下面，明星来了，flow就是帮助我们静态类型检查的工具库。这个文件夹下，是vue源码使用的各种自定义类型的定义，可以让flow按我们的规定检查我们使用这些类型的代码是否可靠。

 

可单独发布的一些模块，里面模块的核心代码也是从src打包来的，只是加些架子成了单独的npm模块作为插件用。这些模块有：

 

跳出子目录，回到根目录，我们继续

 

这里面是打包的配置和打包逻辑代码，上面说的dist全部文件和packages目录下核心文件，都是从这里执行打包后产生的。

 

这个不用说了，前面说了，vue的真正核心源码，其他都是为了开发他或者帮助使用他服务的。

 

单元测试和自动测试的配置等。

 

前面说了，是对typescript应用的支持版本，源码里目录下还包含ts版本的测试流程配置。

 

Babel的配置文件

 

 官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。”

 

 

ESLint是一个语法规则和代码风格的检查工具，这里面是是检查设置和忽视检查的目录的名单。

 

Flow的配置，里面配置忽略静态检查的目录、检查使用的库，并且配置哪儿些目录下的哪儿些文件需要用我们上面flow文件夹下定义的类型去做对应检查。

 

这个就不说了，常见的。

 

码云仓库上的该项目的介绍。

 

软件证书协议，The MIT License (MIT)

 

这个文件作用大家都明白，但是里面所有配置的作用，大家很难说全。后续我们详细说vue源码使用到的配置的作用。

 

Github上该项目的介绍。

 

yarn替换npm安装项目时，会用到。看来这作者们习惯使用yarn。

官方对 yarn.lock 文件的说明如下：

为了跨机器安装得到一致的结果，Yarn 需要比你配置在 package.json 中的依赖列表更多的信息。Yarn 需要准确存储每个安装的依赖是哪个版本。

为了做到这样，Yarn 使用一个你项目根目录里的 yarn.lock 文件。这可以媲美其他像 Bundler 或 Cargo 这样的包管理器的 lockfiles。它类似于 npm 的 npm-shrinkwrap.json，然而它并不是有损的并且它能创建可重现的结果。npm-shrinkwrap.json，那 npm-shrinkwrap.json 又是什么呢？

通过查资料，简单来说，它是由命令 npm shrinkwrap 生成的，它的作用和 package-lock.json 的作用是一样的，都是用来锁定版本用的。现在有了 package-lock.json 之后就不怎么用 npm-shrinkwrap.json 了。

3、package.json文件配置解释

 

  
    
    
  

   
     
     
   {
   
     
     
    // 名称
   
     
     
    "name": "vue",
   
     
     
    // 版本
   
     
     
    "version": "2.6.10",
   
     
     
    // 描述
   
     
     
    "description": "Reactive, component-oriented view layer for modern web interfaces.",
   
     
     
     // npm包项目的主要入口文件，commonjs module引入需要的如文件
   
     
     
    "main": "dist/vue.runtime.common.js",
   
     
     
     // es module引入需要的入口文件
   
     
     
    "module": "dist/vue.runtime.esm.js",
   
     
     
     //umd，带编译器的版本
   
     
     
    "unpkg": "dist/vue.js",
   
     
     
    // jsdelivr cdn公共库
   
     
     
    "jsdelivr": "dist/vue.js",
   
     
     
    // TypeScript 引入时的入口文件
   
     
     
    "typings": "types/index.d.ts",
   
     
     
    // 当你发布package时，具体那些文件会发布上去
   
     
     
    "files": [
   
     
     
    "src",
   
     
     
    "dist/*.js",
   
     
     
    "types/*.d.ts"
   
     
     
    ],
   
     
     
    // 声明该模块是否包含 sideEffects（副作用），从而可以为 tree-shaking 提供更大的优化空间。
   
     
     
    "sideEffects": false,
   
     
     
    "scripts": {
   
     
     
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
   
     
     
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
   
     
     
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
   
     
     
    "dev:test": "karma start test/unit/karma.dev.config.js",
   
     
     
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
   
     
     
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
   
     
     
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
   
     
     
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
   
     
     
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
   
     
     
    "build": "node scripts/build.js",
   
     
     
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
   
     
     
    "build:weex": "npm run build -- weex",
   
     
     
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
   
     
     
    "test:unit": "karma start test/unit/karma.unit.config.js",
   
     
     
    "test:cover": "karma start test/unit/karma.cover.config.js",
   
     
     
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
   
     
     
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",
   
     
     
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
   
     
     
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
   
     
     
    "test:types": "tsc -p ./types/test/tsconfig.json",
   
     
     
    "lint": "eslint src scripts test",
   
     
     
    "flow": "flow check",
   
     
     
    "sauce": "karma start test/unit/karma.sauce.config.js",
   
     
     
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
   
     
     
    "release": "bash scripts/release.sh",
   
     
     
    "release:weex": "bash scripts/release-weex.sh",
   
     
     
    "release:note": "node scripts/gen-release-note.js",
   
     
     
    "commit": "git-cz"
   
     
     
    },
   
     
     
     //git提交前代码质量检查，自动化注释模板
   
     
     
    "gitHooks": {
   
     
     
    "pre-commit": "lint-staged",
   
     
     
    "commit-msg": "node scripts/verify-commit-msg.js"
   
     
     
    },
   
     
     
    // 代码检查
   
     
     
    "lint-staged": {
   
     
     
    "*.js": [
   
     
     
    "eslint --fix",
   
     
     
    "git add"
   
     
     
    ]
   
     
     
    },
   
     
     
    // git仓库所在位置
   
     
     
    "repository": {
   
     
     
    "type": "git",
   
     
     
    "url": "git+https://github.com/vuejs/vue.git"
   
     
     
    },
   
     
     
    // 关键词
   
     
     
    "keywords": [
   
     
     
    "vue"
   
     
     
    ],
   
     
     
    // 作者
   
     
     
    "author": "Evan You",
   
     
     
    // 开源协议
   
     
     
    "license": "MIT",
   
     
     
    // bug地址
   
     
     
    "bugs": {
   
     
     
    "url": "https://github.com/vuejs/vue/issues"
   
     
     
    },
   
     
     
    // 主页
   
     
     
    "homepage": "https://github.com/vuejs/vue#readme",
   
     
     
    // 依赖
   
     
     
    "devDependencies": {
   
     
     
    "@babel/core": "^7.0.0",
   
     
     
    "@babel/plugin-proposal-class-properties": "^7.1.0",
   
     
     
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
   
     
     
    "@babel/plugin-syntax-jsx": "^7.0.0",
   
     
     
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
   
     
     
    "@babel/preset-env": "^7.0.0",
   
     
     
    "@babel/register": "^7.0.0",
   
     
     
    "@types/node": "^10.12.18",
   
     
     
    "@types/webpack": "^4.4.22",
   
     
     
    "acorn": "^5.2.1",
   
     
     
    "babel-eslint": "^10.0.1",
   
     
     
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
   
     
     
    "babel-loader": "^8.0.4",
   
     
     
    "babel-plugin-istanbul": "^5.1.0",
   
     
     
    "babel-plugin-transform-vue-jsx": "^4.0.1",
   
     
     
    "babel-preset-flow-vue": "^1.0.0",
   
     
     
    "buble": "^0.19.3",
   
     
     
    "chalk": "^2.3.0",
   
     
     
    "chromedriver": "^2.45.0",
   
     
     
    "codecov": "^3.0.0",
   
     
     
    "commitizen": "^2.9.6",
   
     
     
    "conventional-changelog": "^1.1.3",
   
     
     
    "cross-spawn": "^6.0.5",
   
     
     
    "cz-conventional-changelog": "^2.0.0",
   
     
     
    "de-indent": "^1.0.2",
   
     
     
    "es6-promise": "^4.1.0",
   
     
     
    "escodegen": "^1.8.1",
   
     
     
    "eslint": "^5.7.0",
   
     
     
    "eslint-plugin-flowtype": "^2.34.0",
   
     
     
    "eslint-plugin-jasmine": "^2.8.4",
   
     
     
    "file-loader": "^3.0.1",
   
     
     
    "flow-bin": "^0.61.0",
   
     
     
    "hash-sum": "^1.0.2",
   
     
     
    "he": "^1.1.1",
   
     
     
    "http-server": "^0.11.1",
   
     
     
    "jasmine": "^2.99.0",
   
     
     
    "jasmine-core": "^2.99.0",
   
     
     
    "karma": "^3.1.1",
   
     
     
    "karma-chrome-launcher": "^2.1.1",
   
     
     
    "karma-coverage": "^1.1.1",
   
     
     
    "karma-firefox-launcher": "^1.0.1",
   
     
     
    "karma-jasmine": "^1.1.0",
   
     
     
    "karma-mocha-reporter": "^2.2.3",
   
     
     
    "karma-phantomjs-launcher": "^1.0.4",
   
     
     
    "karma-safari-launcher": "^1.0.0",
   
     
     
    "karma-sauce-launcher": "^2.0.2",
   
     
     
    "karma-sourcemap-loader": "^0.3.7",
   
     
     
    "karma-webpack": "^4.0.0-rc.2",
   
     
     
    "lint-staged": "^8.0.0",
   
     
     
    "lodash": "^4.17.4",
   
     
     
    "lodash.template": "^4.4.0",
   
     
     
    "lodash.uniq": "^4.5.0",
   
     
     
    "lru-cache": "^5.1.1",
   
     
     
    "nightwatch": "^0.9.16",
   
     
     
    "nightwatch-helpers": "^1.2.0",
   
     
     
    "phantomjs-prebuilt": "^2.1.14",
   
     
     
    "puppeteer": "^1.11.0",
   
     
     
    "resolve": "^1.3.3",
   
     
     
    "rollup": "^1.0.0",
   
     
     
    "rollup-plugin-alias": "^1.3.1",
   
     
     
    "rollup-plugin-buble": "^0.19.6",
   
     
     
    "rollup-plugin-commonjs": "^9.2.0",
   
     
     
    "rollup-plugin-flow-no-whitespace": "^1.0.0",
   
     
     
    "rollup-plugin-node-resolve": "^4.0.0",
   
     
     
    "rollup-plugin-replace": "^2.0.0",
   
     
     
    "selenium-server": "^2.53.1",
   
     
     
    "serialize-javascript": "^1.3.0",
   
     
     
    "shelljs": "^0.8.1",
   
     
     
    "terser": "^3.10.2",
   
     
     
    "typescript": "^3.1.3",
   
     
     
    "webpack": "~4.28.4",
   
     
     
    "weex-js-runtime": "^0.23.6",
   
     
     
    "weex-styler": "^0.3.0",
   
     
     
    "yorkie": "^2.0.0"
   
     
     
    },
   
     
     
    // 设置一些用于npm包的脚本命令会用到的配置参数
   
     
     
    "config": {
   
     
     
      //日志路径吧
   
     
     
       "commitizen": { 
   
     
     
         "path": "./node_modules/cz-conventional-changelog"
   
     
     
    }
   
     
     
    }
   
     
     
   }
  
    
    
  

 

 

4、总结

我们看到使用vue开发的web项目越来越多，我们看到vue这种渐进式库很强大，他为什么这强大？他的屋里为啥这么热闹，为啥客人源源不断，我们本文先站在门外往里望下他的主人在做什么菜。我们后续会到门口看下，迈过门槛，踏入大堂，品尝食材，后厨观摩，想想都很刺激啊。