The "data" option should be a function that returns a per-instance value in component definitions

Vue 中 data 使用对象形式报错

报错信息：The "data" option should be a function that returns a per-instance value in component definitions

export default {
    name: 'app',
    data：{
           name: ''
    }
}

原因：简单地说，在实例中data是对象, 在组件中data就得是函数返回对象

解决办法：将data改为函数且返回data中的数据对象

export default {
    name: 'app',
    data() {
        return {
           name: ''
        }
    }
}

详细原因：

vue源码中关于data部分，在官方文档中也有说明

strats.data = function (parentVal, childVal, vm) {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    //注意这个部分！！！！！！！
    if (typeof childVal !== 'function') {
      process.env.NODE_ENV !== 'production' && warn(
        'The "data" option should be a function ' +
        'that returns a per-instance value in component ' +
        'definitions.',
        vm
      )
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    ...
    ...