Question

访问组件中的数据时，forEach和this.$data.randomData之间有什么区别？

Answer 1

vm.$data is the actual data object。问题是Vue实例代理访问$data，这意味着（几乎，见下文）this.$data.bob之类的任何内容都可以作为this.bob访问。 Docs：

创建实例后，原始数据对象即可访问为vm.$data。 Vue实例也代理所有在数据对象上找到的属性，因此vm.a将相当于 vm.$data.a。

那么$data有什么用呢？据我所知，有两种情况只有$data可以帮助你：

如果您的商家信息以_或$开头，则不会代理。
- 因此，如果您有data._bob，则this._bob无效，this.$data.bob。
- Relevant docs：
  
  以_或$开头的属性将不代理 Vue实例，因为它们可能与Vue的内部属性冲突和API方法。您必须以vm.$data._property访问它们。
如果您想要整个data对象的内容。
- Relevant docs：
  
  如果需要，可以通过获得原始对象的深度克隆将vm.$data传递给JSON.parse(JSON.stringify(...))。

演示：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    $alice: 'Alice',
    _bob: 'Bob'
  },
  mounted() {
    console.log('Whole data is:', this.$data)
    console.log('this.$alice is:', this.$alice)
    console.log('this.$data.$alice is:', this.$data.$alice)
    console.log('this._bob is:', this._bob)
    console.log('this.$data._bob is:', this.$data._bob)
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Whole object: {{ $data }}</p>
  <p>$data.$alice: {{ $data.$alice }}</p>
  <p>$data._bob: {{ $data._bob }}</p>
</div>

这是什么区别。$ data.randomData＆amp; this.randomData

1 个答案: