本文主要是介绍Vue源码解析+关于组件的data属性+为什么组件内data可以直接this等等（摸索），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
疑问1：为什么组件内data为方法而不是一个对象？
疑问2：为什么data就挂在了Vue实例上，用this直接取？
源码
//初始化
function initData(vm: Component) {let data = vm.$options.data //组件数据data = vm._data = typeof data === 'function' //放在实例的_data属性上，? getData(data, vm): data || {}.........略过最后...// 通过proxy把data里的值代理到vm对象上proxy(vm, `_data`, key)；
}// proxy函数相关的代码
// 定义访问器属性
const sharedPropertyDefinition = { //.defineProperty的配置enumerable: true,configurable: true,get: noop,set: noop
}function proxy (target: Object, sourceKey: string, key: string) {sharedPropertyDefinition.get = function proxyGetter() {return this[sourceKey][key]; // 即访问 this['_data'][key]}sharedPropertyDefinition.set = function proxySetter(val) {this[sourceKey][key] = val;} Object.defineProperty(target, key, sharedPropertyDefinition)
}
export function getData (data: Function, vm: Component): any {// #7573 disable dep collection when invoking data getterspushTarget()try {return data.call(vm, vm) } catch (e) {handleError(e, vm, `data()`)return {}} finally {popTarget()}
}
1：为什么组件内data为方法而不是一个对象？
组件data有一个三元判断为：判断为方法时调用getData，是对象时返回原值，或者判空。
getData：该方法主要执行就是调用data，即data.call(vm, vm)，至于为什么传进去vm,不知道！希望有大神告知！
data = vm._data = typeof data === 'function' ? getData(data, vm): data || {}
组件的数据放在实例的_data属性上。
如果组件的data是一个对象，对象是引用类型。则该组件复用时，注意是该组件复用时会造成混乱。如果采用从方法return出来的方式那就是每次复用都有自己一块独立的内存。
2：为什么data就挂在了Vue实例上，用this直接取？
他是通过proxy（代理）把data里的值代理到vm对象上也就是vue实例上，采用了劫持Object.defineProperty，当获取vue实例上的某个属性时，就代理到_data上。
第一次看到这，有不对的希望指正！！
这篇关于Vue源码解析+关于组件的data属性+为什么组件内data可以直接this等等（摸索）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
