为什么这个简单的数据初始化函数在这个vue组件中不起作用？

Question

我有一个 vue 3 组件。相关脚本代码如下；

<script>
/* eslint-disable */

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
  }
};

function dataInitialisation()
{
  return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };
}
</script>

以上代码工作正常。

但是，如果我将函数 dataInitialisation() 代码修改成这样；

function dataInitialisation()
{
  init_data = {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };

  return init_data;
}

通过上面的功能，vue网站变成了空白，没有出现错误信息。怎么了？这两个功能在我看来几乎相同。

编辑：我注意到另一个奇怪的行为。我在函数中添加了一个无意义的行 x=2，这导致网站也变成空白。

function dataInitialisation()
{
  x = 2; //meaningless line caused website to go blank

  return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };
}

Answer 1

我会回答我自己的问题。感谢评论区的@3limin4t0r，我得到了答案。

我犯了一个新手错误。我忘记了变量init_data前面的let。 javascript.

中没有错误消息

function dataInitialisation() {
  let init_data = {
    chartOptions: {
      plotOptions: {
        bar: {
          horizontal: true,
        },
      },
      xaxis: {
        //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
        categories: [1991, 1992],
      },
    },
    series: [
      {
        name: "series-1",
        data: [30, 40],
      },
    ],
  };

  return init_data;
}

为什么这个简单的数据初始化函数在这个vue组件中不起作用？

Why doesn't this simple data initialisation function work in this vue component?

javascript

vue.js

vue-component

vuejs3