广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章带大家解读vue源码，来介绍一下Vue2中为什么可以使用 this 访问各种选项中的属性，希望对大家有所帮助！

下方的如何阅读源码不感兴趣可以不用看，可以通过这个直接定位到【源码分析】

网上有很多关于源码阅读的文章，每个人都有自己的方式，但是网上的文章都是精炼之后的，告诉你哪个文件、那个函数、那个变量是干什么的；【相关推荐：vuejs视频教程、web前端开发】

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

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

万事开头难，找到起点是最难的，对于前端项目，我们想要找到入口文件，一般都是从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的源码：

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

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

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

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

import Vue from './runtime/index'export default Vue as GlobalAPI

这个时候就去找runtime/index.ts的导出内容：

runtime/index.ts的导出内容：

import Vue from 'core/index'export default Vue

这个时候就去找core/index.ts的导出内容：

core/index.ts的导出内容：

import Vue from './instance/index'export default Vue

这个时候就去找instance/index.ts的导出内容：

instance/index.ts的导出内容：

function Vue(options) {    if (__DEV__ && !(this instanceof Vue)) {        warn('Vue is a constructor and should be called with the `new` keyword')    }    this._init(options)}export default Vue as unknown as GlobalAPI

这样我们就找到Vue的构造函数了，这个时候我们就可以开始阅读源码了；

阅读源码的目的一定要清晰，当然你可以说目的就是了解Vue的实现原理，但是这个目的太宽泛了，我们可以把目的细化一下，例如：

Vue的生命周期是怎么实现的

Vue的数据响应式是怎么实现的

Vue的模板编译是怎么实现的

Vue的组件化是怎么实现的

Vue的插槽是怎么实现的

等等...

例如我们的这次阅读计划就是了解Vue的this为什么可以访问到选项中的各种属性，这里再细分为：

Vue的this是怎么访问到data的

Vue的this是怎么访问到methods的

Vue的this是怎么访问到computed的

Vue的this是怎么访问到props的

上面顺序不分先后，但是答案一定是在源码中。

上面已经找到了Vue的入口文件，接下来我们就可以开始阅读源码了，这里我就以Vue的this为什么可以访问到选项中的各种属性为例，来分析Vue的源码；

首先看一下instance/index.ts的源码：

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    }}0

有这么多东西，我们不用管，要清晰目的，我们在使用Vue的时候，通常是下面这样的：

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    }}1

也就是Vue的构造函数接收一个选项对象，这个选项对象中有data和methods；

我们要知道Vue的this为什么可以访问到data和methods，那么我们就要找到Vue的构造函数中是怎么把data和methods挂载到this上的；

很明显构造函数只做了一件事，就是调用了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 }}2：

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    }}2

那么我们就去找_init方法，这个方法在哪我们不知道，但是继续分析源码，我们可以看到下面会执行很多xxxMixin的函数，并且Vue作为参数传入：

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    }}3

盲猜一波，见名知意：

initMixin：初始化混入

stateMixin：状态混入

eventsMixin：事件混入

lifecycleMixin：生命周期混入

renderMixin：渲染混入

我们就去找这些混入的方法，一个一个的找，找到initMixin，直接就找了_init方法：

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    }}4

代码这么多没必要全都看，记住我们的目的是找到data和methods是怎么挂载到this上的；

先简化代码，不看没有意义的代码：

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    }}5

传递过来的Vue并没有做太多事情，只是把_init方法挂载到了Vue.prototype上；

在_init方法中，vm被赋值为this，这里的this就是Vue的实例，也就是我们的vm；

继续往下看，我们有目的的看代码，只需要看有vm和options组合出现的代码，于是就看到了：

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    }}6

_isComponent前面带有_，说明是私有属性，我们通过new Vue创建的实例时走到现在是没有这个属性的，所以走到else分支；

resolveConstructorOptions(vm.constructor)中没有传递options，所以不看这个方法，直接看mergeOptions：

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    }}7

记住我们的目的，只需要关心vm和options组合出现的代码，child就是options，vm就是vm，简化之后：

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    }}8

可以看到只剩下了normalizeProps、normalizeInject、normalizeDirectives这三个方法，值得我们关注，但是见名知意，这三个方法可能并不是我们想要的，跟进去看一眼也确实不是;

虽然没有得到我们想要的，但是从这里我们也得到了一个重要信息，mergeOptions最后会返回一个options对象，这个对象就是我们的options，最后被vm.$options接收；

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    }}9

现在我们分析要多一步了，参数只有vm的函数也是需要引起我们的注意的，继续往下看：

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')}0

操作了vm，但是内部没有操作$options，跳过，继续往下看：

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')}1

initLifecycle、initEvents、initRender、initInjections、initState、initProvide这些方法都是操作vm的；

盲猜一波：

这里面最有可能是我们想要的是initState，跟进去看一下：

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')}2

已经找到我们想要的了，现在开始正式分析initState。

根据代码结构可以看到，initState主要做了以下几件事：

我们可以用this来访问的属性是props、methods、data、computed；

看到这里也明白了，为什么在props中定义了一个属性，在data、methods、computed中就不能再定义了，因为props是最先初始化的，后面的也是同理。

initProps的作用是初始化props，跟进去看一下：

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')}3

代码很多，我们依然不用关心其他的代码，只关心props是怎么挂载到vm上的，根据我上面的方法，简化后的代码如下：

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')}4

这里真正有关的就两个地方：

validateProp：看名字就知道是验证props，跳过

proxy：代理，很可疑，跟进去看一下：

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')}5

这里的target就是vm，sourceKey就是_props，key就是props的属性名；

这里通过Object.defineProperty把vm的属性代理到_props上，这样就可以通过this访问到props了。

不是很好理解，那我们来自己就用这些代码实现一下：

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')}6

上面的代码只是为了方便理解，所以会忽略一些细节，比如props的验证等等，真实挂载在_props上的props是通过defineReactive实现的，我这里直接是空的，这些超出了本文的范围。

initMethods的代码如下：

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')}7

跟着之前的思路，我们忽略无关代码，简化后的代码如下：

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')}8

这里的noop和bind在之前的文章中有出现过，可以去看一下：【源码共读】Vue2源码 shared 模块中的36个实用工具函数分析

这里的vm[key]就是methods的方法，这样就可以通过this访问到methods中定义的方法了。

bind的作用是把methods中定义的函数的this指向vm，这样就可以在methods中使用this就是vm了。

简单的实现一下：

var options = {    methods: {        say() {            console.log('say');        }    }}function Vue(options) {    const vm = this    initMethods(vm, options.methods)}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')}8function noop() {}function polyfillBind(fn, ctx) {    function boundFn(a) {        const l = arguments.length        return l            ? l > 1                ? fn.apply(ctx, arguments)                : fn.call(ctx, a)            : fn.call(ctx)    }    boundFn._length = fn.length    return boundFn}function nativeBind(fn, ctx) {    return fn.bind(ctx)}const bind = Function.prototype.bind ? nativeBind : polyfillBindconst vm = new Vue(options)vm.say()

initData的代码如下：

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)  }}0

简化之后的代码如下：

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)  }}1

这里的实现方式和initProps是一样的，都是通过proxy把data中的属性代理到vm上。

注意：initData的获取值的地方是其他的不相同，这里只做提醒，不做详细分析。

initComputed的代码如下：

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)  }}2

简化之后的代码如下：

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)  }}3

这里的实现主要是通过defineComputed来定义computed属性，进去瞅瞅：

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)  }}4

仔细看下来，其实实现方式还是和initProps和initData一样，都是通过Object.defineProperty来定义属性；

不过里面的getter和setter是通过createComputedGetter和createGetterInvoker来创建的，这里不做过多分析。

上面我们已经分析了props、methods、data、computed的属性为什么可以直接通过this来访问，那么我们现在就来实现一下这个功能。

上面已经简单了实现了initProps、initMethods，而initData和initComputed的实现方式和initProps的方式一样，所以我们直接复用就好了：

function Vue(options) {    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    }}2}Vue.prototype._init = function (options) {    const vm = this    vm.$options = options    initState(vm)}function initState(vm) {    const opts = vm.$options    if (opts.props) initProps(vm, opts.props)    if (opts.methods) initMethods(vm, opts.methods)    if (opts.data) initData(vm)    if (opts.computed) initComputed(vm, opts.computed)}function initProps(vm, propsOptions) {    vm._props = {}    for (const key in propsOptions) {        vm._props[key] = propsOptions[key].default        proxy(vm, `_props`, key)    }}function proxy(target, sourceKey, key) {    Object.defineProperty(target, key, {        get() {            return this[sourceKey][key]        },        set(val) {            this[sourceKey][key] = val        }    })}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')}8function noop() {}function polyfillBind(fn, ctx) {    function boundFn(a) {        const l = arguments.length        return l            ? l > 1                ? fn.apply(ctx, arguments)                : fn.call(ctx, a)            : fn.call(ctx)    }    boundFn._length = fn.length    return boundFn}function nativeBind(fn, ctx) {    return fn.bind(ctx)}const bind = Function.prototype.bind ? nativeBind : polyfillBindfunction initData(vm) {    vm._data = {}    for (const key in vm.$options.data) {        vm._data[key] = vm.$options.data[key]        proxy(vm, `_data`, key)    }}function initComputed(vm, computed) {    for (const key in computed) {        const userDef = computed[key]        const getter = userDef        defineComputed(vm, key, bind(userDef, vm))    }}function defineComputed(target, key, userDef) {    Object.defineProperty(target, key, {        get() {            return userDef()        },    })}const vm = new Vue({    props: {        a: {            type: String,            default: 'default'        }    },    data: {        b: 1    },    methods: {        c() {            console.log(this.b)        }    },    computed: {        d() {            return this.b + 1        }    }})console.log('props a: default',vm.a)console.log('data b: 1', vm.b)vm.c() // 1console.log('computed d: 2', vm.d)

注意：上面的代码对比于文章中写的示例有改动，主要是为了实现最后打印结果正确，增加了赋值操作。

通过上面的分析，让我们对构造函数的this有了更深的理解，同时对于this指向的问题也有了更深的理解。

（学习视频分享：vuejs入门教程、编程基础视频）

以上就是聊聊Vue2为什么能通过this访问各种选项中属性的详细内容，更多请关注9543建站博客其它相关文章！