Vue2中，为什么this能直接获取到data和methods

通过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 ?_油墨香^_^的博客-CSDN博客