如何修复Vue报错「[Vue warn]: data functions should return an object」？含改函数仍报错场景

一、基础报错的修复思路 #

这个警告本质是Vue对data选项的硬性要求：组件中data必须是返回普通对象的函数；根实例虽允许直接用对象，但更推荐函数写法。如果触发这个报错，你可以从这几个方向排查修复：

• 确认data是函数而非直接对象：组件里必须用函数（避免多个组件实例共享同一份数据），根实例也建议遵循这个规范
• 确保函数明确返回合法的普通对象：不能返回null、undefined，或是字符串/数字这类基本类型
• 检查语法错误：比如函数漏写return语句，或是return的代码逻辑出错导致没有返回有效对象

举个标准的正确写法示例：

// 组件的正确写法
Vue.component('Welcome', {
  data() {
    return {
      greeting: 'Hello Vue!'
    }
  }
})

// 根实例的推荐写法
new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  // 其他配置项...
})

二、你的代码仍报错的排查与解决 #

看了你提供的代码，data已经是返回克隆对象的函数，但还是触发警告，大概率是以下几个隐藏问题导致的：

1. 原state本身不是合法对象 #

如果state是null、undefined，或是字符串、数字这类基本类型，那么_.cloneDeep(state)返回的结果就不是Vue要求的普通对象，自然会触发警告。

解决方法： 在getState函数里添加日志验证state的有效性：

data: function getState() {
  console.log('原始state:', state); // 查看控制台输出的state是否为有效对象
  return _.cloneDeep(state);
}

如果state确实不是对象，要么修正state的定义，要么在克隆前做兜底处理（比如return _.cloneDeep(state || {})）。

2. Lodash的_.cloneDeep未正确引入 #

如果没有正确加载Lodash，全局变量_会是undefined，调用_.cloneDeep会直接抛出错误，导致data函数执行失败，无法返回对象。

解决方法： 先验证Lodash是否可用：

console.log('Lodash是否加载:', typeof _ !== 'undefined');

如果输出false，你需要确保Lodash已正确引入——比如通过CDN脚本引入，或是npm安装后在代码里import _ from 'lodash'。

3. 函数内部存在隐性异常 #

比如state包含不可克隆的类型（如Symbol、循环引用对象），导致_.cloneDeep抛出异常，函数无法正常返回值。

解决方法： 给函数添加错误捕获，排查具体问题：

data: function getState() {
  try {
    const clonedState = _.cloneDeep(state);
    console.log('克隆后的状态:', clonedState);
    return clonedState;
  } catch (err) {
    console.error('克隆状态出错:', err);
    // 兜底返回空对象，避免触发警告
    return {};
  }
}

4. 临时测试：简化data函数验证 #

你可以先把data函数改成最简单的返回空对象，看警告是否消失：

data: function() {
  return { test: 'test' };
}

如果警告消失，说明问题出在_.cloneDeep(state)这部分逻辑；如果还是报错，那要检查是否有其他代码影响（比如Vue版本不兼容、其他插件冲突）。

内容的提问来源于stack exchange，提问作者Richard