vue中 为啥可以直接点data中的数据
- 通过this能直接获取到methods，是因为在new Vue实例化时已经遍历了methods，为每一个methods方法通过bind指定了this，也就是指定了this为new Vue的实例(vm);
- 通过this能直接获取到data，是因为data里的属性最终被存储到new Vue的实例(vm)上的_data对象中，我们访问this.xxx，实际上是访问通过Object.defineProperty代理后的this._data.xxx
简易实现：
function Person(options) {
let vm = this;
vm.$options = options;
if (options.data) {
initData(vm);
}
if (options.methods) {
initMethods(vm, options.methods);
}
}
function initData(vm) {
let data = vm._data = vm.$options.data;
let keys = Object.keys(data);
let len = keys.length;
while(len--) {
let key = keys[len];
proxy(vm, "_data", key);
}
}
function proxy(vm, sourceKeys, key) {
Object.defineProperties(vm, sourceKeys, {
enumerable: true,
configurable: true,
get: function() {
return vm[sourceKeys][key];
},
set: function(val) {
return vm[sourceKeys][key] = val;
}
})
}
function initMethods(vm, methods) {
for (let key in methods) {
vm[key] = typeof methods[key] === "function" ? methods[key].bind(vm) : noop;
}
}
function noop(a, b, c) { }
let p1 = new Person({
data: {
name: "pino",
age: 18
},
methods: {
sayName() {
console.log("I am" + this.name);
}
}
})
console.log(p1.name); // pino
p1.sayName(); // 'I am pino'
参考文章
Vue2中，为什么this能直接获取到data和methods
