vue源码解读系列（4）：为什么通过this.xxx可以访问到data的数据

该页面 ctrl + F 搜索 下一个 来查看流程

我们看看 new Vue 的时候发生了什么，我们为什么可以通过 this.xxx 访问到 data 中的数据。

看源码要确立目标，想要看哪里的知识，就去看哪里，别的无关的函数就不要去看了，要不一个套一个，一会就给你看懵逼了

分析

1、vue的最初形态

// src/core/instance/index.js import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' import { warn } from '../util/index' function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } // 下一个 this._init(options) } // `this._init(options)` 这个函数在 `initMixin(Vue)` 里面定义了 initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) export default Vue

2、分析 initMixin 函数，主要做了一些初始化的操作，挂载 dom 节点等

// src/core/instance/init.js export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props // 下一个 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') // 挂载dom节点 if (vm.$options.el) { vm.$mount(vm.$options.el) } } }

3、分析 state.js ，这个里面都是初始化状态，如props、methods、data、computed、watch

// src/core/instance/state.js export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { // 下一个 initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } }

这一步将 data 拷贝了一份给 vm._data

// src/core/instance/state.js function initData (vm: Component) { // 拿到data里的数据 let data = vm.$options.data // 判断data是不是个函数，并且拷贝了一份给vm._data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } // 拿到data const keys = Object.keys(data) // 拿到props const props = vm.$options.props // 拿到methods const methods = vm.$options.methods let i = keys.length // 判断如果methods或props命名和data重复报错，否则去代理proxy(vm, `_data`, key) while (i--) { const key = keys[i] if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { warn( `Method "${key}" has already been defined as a data property.`, vm ) } } if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { // 下一个 proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */) }

这里通过 Object.defineProperty 把 _data 变为 getter 和 setter，我们访问 vm.key，也就是访问 this[sourceKey][key]，sourceKey就是_data

// src/core/instance/state.js const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop } export function proxy (target: Object, sourceKey: string, key: string) { // 我们访问 `vm.key`，也就是访问 this[sourceKey][key]，sourceKey就是_data sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition) }

Object.defineProperty详解

测试

import Vue form 'vue' var app = new Vue({ el: '#app', data () { message: 'hello word' }, mounted () { // 调用 this.message 的时候其实是调用 this._data.message，但是因为下划线开头的是内部属性，我们不要在外部访问 console.log(this.message) console.log(this._data.message) } })