【源码共读】Vue2 中为什么可以使用 this 访问各种选项中的属性？

如何阅读源码

网上有很多关于源码阅读的文章，每个人都有自己的方式，但是网上的文章都是精炼之后的，告诉你哪个文件、那个函数、那个变量是干什么的；

但是没有告诉你这些是怎么找到的，这些是怎么理解的，这些是怎么验证的，这些是怎么记忆的，这些是怎么应用的。

我也不是什么大神，也是在摸索的过程中，逐渐找到了自己的方式，我这里就分享一下我的方式，希望能帮助到大家。

怎么找到起点

万事开头难，找到起点是最难的，对于前端项目，我们想要找到入口文件，一般都是从package.json中的main字段开始找；

package.json中的main字段代表的是这个包的入口文件，通常我们可以通过这个字段的值来找到我们要阅读的起点。

但是对于Vue来说，这个字段是dist/vue.runtime.common.js，这个文件是编译后的文件，我们是看不懂的，所以需要找到源码的入口文件；

这个时候我们就需要看package.json中的scripts字段：

{
"scripts": {"dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev","dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:runtime-cjs-dev","dev:esm": "rollup -w -c scripts/config.js --environment TARGET:runtime-esm","dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:server-renderer","dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:compiler ","build": "node scripts/build.js","build:ssr": "npm run build -- runtime-cjs,server-renderer","build:types": "rimraf temp && tsc --declaration --emitDeclarationOnly --outDir temp && api-extractor run && api-extractor run -c packages/compiler-sfc/api-extractor.json","test": "npm run ts-check && npm run test:types && npm run test:unit && npm run test:e2e && npm run test:ssr && npm run test:sfc","test:unit": "vitest run test/unit","test:ssr": "npm run build:ssr && vitest run server-renderer","test:sfc": "vitest run compiler-sfc","test:e2e": "npm run build -- full-prod,server-renderer-basic && vitest run test/e2e","test:transition": "karma start test/transition/karma.conf.js","test:types": "npm run build:types && tsc -p ./types/tsconfig.json","format": "prettier --write --parser typescript "(src|test|packages|types)/**/*.ts"","ts-check": "tsc -p tsconfig.json --noEmit","ts-check:test": "tsc -p test/tsconfig.json --noEmit","bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js","release": "node scripts/release.js","changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"}
 } 

可以看到Vue的package.json中有很多的scripts，这些相信大家都可以看得懂，这里我们只关注dev和build这两个脚本；

dev脚本是用来开发的，build脚本是用来打包的，我们可以看到dev脚本中有一个TARGET的环境变量，这个环境变量的值是full-dev，我们可以在scripts/config.js中找到这个值；

直接在scripts/config.js中搜索full-dev：

这样就可以找到这个值对应的配置：

var config = {'full-dev': {entry: resolve('web/entry-runtime-with-compiler.ts'),dest: resolve('dist/vue.js'),format: 'umd',env: 'development',alias: { he: './entity-decoder' },banner}
} 

entry字段就是我们要找的入口文件，这个文件就是Vue的源码入口文件，后面的值是web/entry-runtime-with-compiler.ts，我们可以在web目录下找到这个文件；

但是并没有在根目录下找到web目录，这个时候我们就大胆猜测，是不是有别名配置，这个时候我也正好在scripts下看到了一个alias.js文件，打开这个文件，发现里面有一个web的别名；

代码如下：

module.exports = {vue: resolve('src/platforms/web/entry-runtime-with-compiler'),compiler: resolve('src/compiler'),core: resolve('src/core'),web: resolve('src/platforms/web'),weex: resolve('src/platforms/weex'),shared: resolve('src/shared')
} 

为了验证我们的猜测，我们可以在config.js中搜一下alias，发现确实有引入这个文件：

const aliases = require('./alias')
const resolve = p => {const base = p.split('/')[0]if (aliases[base]) {return path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)}
} 

再搜一下aliases，发现确实有配置别名：

// 省略部分代码
const config = {plugins: [alias({entries: Object.assign({}, aliases, opts.alias)}),].concat(opts.plugins || []),
} 

这样我们就可以确认，web就是src/platforms/web这个目录，我们可以在这个目录下找到entry-runtime-with-compiler.ts这个文件；

这样我们就成功的找到了Vue的源码入口文件，接下来我们就可以开始阅读源码了；

如何阅读源码

上面找到了入口文件，但是还是不知道如何阅读源码，这个时候我们就需要一些技巧了，这里我就分享一下我自己的阅读源码的技巧；

像我们现在看的源码几乎都是使用esm模块化或者commonjs模块化的，这些都会有一个export或者module.exports，我们可以通过这个来看导出了什么；

只看导出的内容，其他的暂时不用管，直接找到最终导出的内容，例如Vue的源码：

1.entry-runtime-with-compiler.ts的导出内容：

import Vue from './runtime-with-compiler'

export default Vue 

这个时候就去找runtime-with-compiler.ts的导出内容：

2.runtime-with-compiler.ts的导出内容：

import Vue from './runtime/index'

export default Vue as GlobalAPI 

这个