并不是这样的，data在子组件里是一个函数，是为了告诉你，这个数据是这个组件独享的，不要和其他组件公用，避免冲突。

官网上有非常好的解释, 请点击这里, data必须是一个函数

// 直接声明的对象只占某一块内存空间，对它的所有引用共用该空间。

var data = {

  id: 'abc',

  count: 100

}

console.log('type:', typeof data)

var a = data

var b = data

console.log('a.id=', a.id)

a.id = '007'

console.log('a.id=', a.id)

console.log('b.id=', b.id)

// 方法每次返回的对象在内存中占用不同块空间，每个引用各自维护自己的空间。

function dfunc() {

  return {

    id: 'default_value',

    count: 1

  }

}

console.log('type:', typeof dfunc)

var a1 = dfunc()

var b1 = dfunc()

console.log('a1.id=', a1.id)

a1.id = '008'

console.log('a1.id=', a1.id)

console.log('b1.id=', b1.id)

猜测：

Vue 在获取data 这个组件的成员时会先判断其类型，如果是一个对象则直接引用，如果是一个函数则获取函数的返回值。

以上代码就是模拟Vue 获取data 对象的过程，当data 直接是一个对象时所有该组件的实例公用一份数据，当data 时函数时每个组件实例维护自己的数据。

子组件里面的data是函数是因为当我们页面中运用同一个子组件多次，要是data只是一个对象的话，相同子组件就会共享这个data对象，这是一件非常糟糕的事情。写成函数返回一个对象是想让子组件有自己的data对象而不与其它组件共享

这是es6的语法，可以更好的优化页面性能吧