Vue数据函数结构有什么不同

Question

我想知道以下格式有什么不同，是否有不同的效果：

data: function() {
  return {
    name: 'John',
    phone: 12345
  }
}

这是另一种格式：

data: {
  name: 'John',
  phone: 12345
}

Answer 1

使用 Vue，你肯定会问自己一个问题“为什么数据必须是一个返回对象的函数，而不仅仅是一个对象？”

特别是考虑到在某些地方，数据不是函数，正如您在几个示例中的 App 组件中最有可能看到的那样。

解释是当组件被多次使用时，如果它不是一个函数，而是一个普通的对象，像这样：

数据：{姓名：'约翰'，电话：12345}

然后由于 JavaScript 的工作方式，组件的每个实例都将共享此属性。在 99.9% 的情况下，这不是您想要的，您必须这样做：

数据：函数（）{返回{名称：'约翰'，电话：12345}}

一开始可能不直观，但是一旦您接受了这种解释并了解到它对您的应用程序有害，并且可能是错误的来源，您就会记住始终使用数据函数。