Data 的 2 种写法

Vue 的 data 属性有 2 种写法，之前的示例全部使用的是第一种。形如：

data: {
  hours: new Date().getHours(),
  msg : 'World',
  dogs: ['tommy', 'jerry', 'ben']
}

Vue 的 data 属性还有第 2 种写法，要求它是一个返回一个对象的函数。形如：

data: function () {
  let obj = {
    hours: new Date().getHours(),
    msg : 'World',
    dogs: ['tommy', 'jerry', 'ben']
  };
  return obj;
}

通常不会写的这么啰嗦。一般都是简写为：

data () {
  return {
    hours: new Date().getHours(),
    msg : 'World',
    dogs: ['tommy', 'jerry', 'ben']
  };
}

警告

虽然 data 属性的写法有 2 种，但是

• 第 1 种的 data: { ... } 对象的写法在未来会出现问题！某些场景中它不适用。

• 第 2 种的 data () { return {...} } 函数的写法则一直有效。

因此，从这里开始，我们将直接 采用第 2 种写法，不再使用第 1 种写法 。