在组件中访问数据时，this.$data.randomData与this.randomData的区别是什么？

嘿，这个问题问到点子上了！在Vue组件里，这两种写法看似差不多，但背后的逻辑和适用场景还是有区别的，我给你掰扯清楚：

• 核心是Vue的属性代理机制
  Vue在初始化组件实例时，会自动把$data对象里的所有可枚举属性代理到实例本身（也就是this）。简单说，this.randomData就是Vue给你的语法糖，它会自动帮你指向this.$data.randomData。所以绝大多数情况下，两者访问到的是同一个值，修改也会同步触发响应式更新。

• 访问范围的区别

  • 如果你在实例上直接添加了不属于$data的自定义属性（比如this.myTempProp = '临时值'），那this.myTempProp能正常访问，但this.$data.myTempProp肯定找不到——因为它根本不在数据源对象里。
  • 反过来，如果你手动把$data里的randomData删掉了，那this.randomData也会跟着访问不到，毕竟代理的源头没了。

• 响应式的细微差异
  不管是用this.randomData = '新值'还是this.$data.randomData = '新值'，只要这个属性原本就在$data里，都会触发响应式更新，这点完全一致。
  但如果是给$data新增属性（比如this.$data.newProp = '新属性'），虽然this.newProp也能访问到，但这个新属性不会是响应式的——因为Vue的响应式依赖收集是在初始化时针对$data已有属性做的，新增属性得用this.$set(this.$data, 'newProp', '新属性')才能变成响应式的，和你用哪种方式添加无关。

• 特殊场景的选择
  日常开发用this.randomData就够了，写法更简洁，也是Vue官方推荐的方式。但有些场景下this.$data更有用：

  • 比如你需要序列化整个数据源对象时，JSON.stringify(this.$data)能直接拿到所有组件数据，不会混入Vue实例自带的$el、$watch这些内置属性；
  • 或者你需要明确区分“组件数据”和“实例自有属性/方法”的时候，直接操作$data会更清晰。

内容的提问来源于stack exchange，提问作者Danny