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: { . . . },则相同的数据对象将在子组件之间共享,这可能会导致一些令人讨厌的错误.

有关此问题的详细信息,请查看Vue.js文档的相应部分.