Vue里this.、this.$data.跟this.$root.这3个有什么区别吗？

Question

Vue纯新人，就像问下我定义了一个p标签：

也加了对应的vue实例

然后我发现这个app.foo跟app.$data.foo,app.$root.foo这3个值是一样的，就纯好奇，问一下各位大佬，这3个有什么区别么？（就单纯的好奇，想看下是不是有啥底层的实现区别之类的）

Answer 1

app.foo和app.$data.foo性质一样，源码里会给vm.key 做一层代理，返回实际vm['_data'][key]，所以如果vue中通过this. 方式访问data中的数据时，实际上是返回了this._data中的数据。

app.$root.foo访问得到的是根父组件中的foo。