在 Vue 中 - this.$data.foo 和 this.foo 有什么区别？

Question

我很好奇，因为两者似乎都起作用，并且在Vue文档中找到答案很难。是否有原因将VUE中的数据称为this.$data.whatever vs仅this.whatever？

Answer 1

$ prefix的数据专门定义用于访问VUE数据属性而不是用户定义的属性。

例如

var data = { foo: 'foo' } // user defined data
var inst = new Vue({ data: { foo: 'foo' } }) // data - built-in vue property
data.foo // user defined data
inst.$data.foo // vue property - data

当您在Vue钩中时，只需将this.foo用于EG即可。内部计算方法。

有关更多详细信息，您可以看到文档

Answer 2

$数据属性用于访问组件外的数据属性：

var data = { a: 1 }
// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true
// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

来源：https：//v2.vuejs.org/v2/api/#data