vue中data定义对象类型直接报错，定义的属性不可用

最新推荐文章于 2022-12-27 10:31:14 发布

小浣熊喜欢揍臭臭

最新推荐文章于 2022-12-27 10:31:14 发布

阅读量1.9k

点赞数

分类专栏： vue源码文章标签： vue

本文链接：https://blog.csdn.net/yalywq/article/details/119221838

版权

vue源码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Vue.js中，当定义组件的data选项时，必须使用函数返回实例化的值，而非直接定义对象。错误的写法会导致属性无法在实例中访问，并触发Vue警告。解决方法包括将data选项改为返回函数的形式或直接修改Vue源码来屏蔽警告。正确做法是采用方法1，即确保data是一个返回实例数据的函数。

摘要由CSDN通过智能技术生成

当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如何进行源码修改