Vue2为什么能通过this访问到data与methods的属性(data,this,vue,开发技术)

看这一段代码我们能知道有个Vue的构造函数 ，然后我们使用new Vue创建了它的实例，并给它传了一个对象参数，里面有data和methods，那么在这个Vue构造函数做了什么才能让我使用this可以直接访问里面的属性或者方法呢？

接收一个options参数

使用 instanceof 判断 this对象上是否出现了Vue的prototype，我们都知道this的指向是取决于谁调用

this._init(options) 证明在这调用要么我们创建的实例上有_init方法要么方法在Vue的prototype上，但是我们可以看到实例上并没有_init方法 ,那么肯定在一个地方给Vue的prototype上加上了_init方法 继续往下看

在源码中会看到很多初始化的函数在这我们initMixin()

这个函数就是在Vue的原型上增加了_init方法，方法接收一个参数，然后定义了vm变量，在我看的时候就想看看这个函数的this指向谁，其实也不难函数挂在Vue构造函数的原型上，调用还是在构造函数里面使用this调用，构造函数的this指向Vue实例，根据this的指向规则 此时的vm就指向了Vue构造函数的实例。

使用this的访问规则如果实例上没有就去原型上找

然后执行 initState(vm)

这里就是对我们传入的data 或者methods进行不同的处理

如果有methods则取调用initMethods方法

前面主要是判断 methods中的值是不是函数，key有没有跟props冲突等

最后一段代码就是在vm的实例上增加方法vm[key]=methods[key]，在读的时候我有这样一个以为为什么还要用bind改变this指向呢不本来就是写在vm实例上的方法吗 只能使用vm调用 那么方法的this不就指向vm吗？

问了群里大佬之后原来这步操作时为了防止用户改变this指向，专门做了个例子

在这我有定义了对象a里面有个age属性和fn，fn我赋值vm实例上的sayHi，然后a.fn()调用很明显this的指向已经被改变了，使用bind之后则不会

data是如何做到的使用this可以直接访问的，其实原理都一样，

首先在vm实例上增加了_data，里面存的我们传入的data参数

get 和 set 方法 注意里面的this 指向vm实例对象，上面已经在vm实例对象上增加了_data 所有在获取或者设置属性值的时候 都是this._data[key] 也就是vm._data[key],

然后通过Object.defineProperty往实例对象上添加属性，所以当我们访问vm[key] 也就是 vm._data[key]