[JavaScript知识库]vue中data定义对象类型直接报错，定义的属性不可用

当data定义为对象类型时，直接会抛错，内部定义的属性也不可用，例如

export default {
  name: "App",
  data:{
    titlebar:"首页",
  }
}

?报错信息如下：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

[Vue warn]: Property or method "titlebar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

解决方式有两种：

方法1：

export default {
  name: "App",
  data(){
    return{
      titlebar:"首页",
    }
  }
}

方法2：

修改源码 vue.esm.js (修改如何生效，可参考博客 vue如何进行源码修改)

将vue.esm.js 中， data不是function 的告警屏蔽即可

strats.data = function (
  parentVal,
  childVal,
  vm
) {
  if (!vm) {
     //  屏蔽 data 不是 function的告警
    // if (childVal && 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
    // }
    return mergeDataOrFn(parentVal, childVal)
  }

修改完，记得要不你的vue.esm.js 替换到node_moudles中，具体参考博客 vue如何进行源码修改