javascript - Vue.js 中的 'data:' 和 'data()' 有什么区别？

Question

我以两种方式使用数据选项。在第一个片段数据对象中包含一个键值，但是在第二个数据中是一个函数。有没有个人的好处。在Vue.js Docs上找不到相关的解释下面是两个代码片段:

new Vue({
  el: "#app",
  data: {
      message: 'hello mr. magoo'
    }

});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

两者都给我相同的输出。

Answer 1

在考虑您的具体代码示例时，对您问题的评论似乎错过了一个关键点。

在根 Vue 实例中，即通过 new Vue({ ... }) 构建，您可以简单地使用 data: { ... } 没有任何问题。问题是当您拥有通过 Vue.component(...) 定义的可重用组件时。在这些情况下，您需要使用 data() {return { ... };} 或 data: function() {return { ... };} .

这样做的原因是为了确保对于可重用子组件的每个单独实例，都有一个包含所有正在操作的数据的唯一对象。如果在子组件中使用 data: { ... }，则相同的数据对象将在子组件之间共享，这可能会导致一些严重的错误。

请查看 corresponding section of the Vue.js documentation有关此问题的更多信息。