首先我们先弄清一个问题,vue2里面的this是什么?如果你去打印,会发现打印出一个 VueComponent 的对象,这就是vue的实例对象,所以vue2里面的this就是当前组件的实例对象。
你说,访问 this 访问 data 里面的数据时,我们直接 this.xxx 就可以访问,可是 data 不是一个函数吗(data直接是对象,那么这个对象会被复制到每个组件实例中,每个组件实例都可以访问和修改这个对象,造成污染)?返回的不是一个新的对象吗?那我们不应该 this.返回的对象.xxx 这样吗?(不瞒你们说,我之前被面试官一连三问,直接一脸懵逼,那时候的我年轻啊,什么原理,影响我cv一把梭吗)。
先看这几个值,然后再看 VueComponent 里面
你会发现除了 VueComponent 包含了data里面声明的对象,还有一个 _data 里面也包含了data的数据,那_data又是什么呢? 去github上面拉取vue2的源码(我这边拉的是2.7.14),文件路径 src/core/instance/state.ts ,里面有一个叫 initState 的函数,没错,这就是vue项目初始化的函数,
这个opts就是传入vue的配置项,进入这个 initData 的函数
能看见这里如果data是个函数,则执行 getData 这个函数,否则直接返回 data ,并赋值给 vm._data ,进入 getData
改变data的指向为vm并将vm当做参数传入,回到 initData 函数
除去一系列的判断,进入 proxy 的函数,里面正是利用 Object.defineProperty 来实现响应式,
sharedPropertyDefinition
现在你知道this为什么能直接访问data里面的数据吗,其实你实际上访问的还是 this.data.xxx ,只是vue帮你处理了。