为什么Vue3组件修改data初始化函数后页面空白且无报错

问题原因 #

你的修改后的代码触发了严格模式下的未声明变量引用错误，这是导致页面空白的核心原因：

1. Vue 3 的组件脚本默认运行在严格模式（'use strict'）下，严格模式明确禁止不使用 var/let/const 声明就直接为变量赋值的行为。
2. 你修改后的代码里的 init_data = {...}、补充案例里的 x=2 都属于未声明就直接赋值的操作，运行时会直接抛出 ReferenceError，打断组件初始化流程，因此页面直接空白。

为什么看不到报错 #

你代码顶部写了 /* eslint-disable */ 关闭了静态语法检查，同时如果没打开浏览器开发者工具的 Console 面板，就看不到运行时抛出的引用错误，你现在打开控制台就能看到对应的报错提示。

修复方案 #

给所有用到的变量加上对应的声明关键字即可，示例如下：

// 修复后的dataInitialisation
function dataInitialisation()
{
  // 用const声明变量
  const init_data = {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };

  return init_data;
}

如果是测试用的临时变量也同样加声明：

function dataInitialisation()
{
  const x = 2; // 加const声明后就不会报错

  return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };
}

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