疑问
不知道你在使用Vue的时候有没有想过,为什么定义在data
对象中的属性,可以用Vue
的实例this
进行访问?
我们来看看源码的实现。
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
// 源码中是这样调用的:proxy(vm, '_data', key)
// vm是Vue的实例,key是data对象属性的名字
function proxy (target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
};
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
}
复制代码
比如有个如下demo
const vm = new Vue({
el: '#app',
data: { message: 'Hello Vue!' },
created() {
console.log(this.message) // 输出Hello Vue!
console.log(this._data.message) // 同样输出Hello Vue!
}
})
复制代码
也就是说当我们这样this.message
写的时候,Vue
通过Object.defineProperty
给this.message
设置一层代理,实际访问的是this._data
里的message
属性,而this._data
指向的对象就是我们写的data
对象。