Почему эта простая функция инициализации данных не работает в этом компоненте vue?

#javascript #vue.js #vue-component #vuejs3

Вопрос:

У меня есть компонент 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],
        }
      ]
    };
}

1. Вы забыли const let var ключевое слово , или раньше init_data . Я не настолько хорошо знаком с Vue.js так что я не уверен, что это что-то решает. Однако глобальные переменные часто приводят к большему количеству ошибок, чем их неглобальные аналоги. const и let , вообще говоря, приведет к наименьшему количеству ошибок, поскольку они имеют наименьшую область применения.

2. @3limin4t0r, парень, я чувствую себя глупо. Я так долго работал над python, что забыл о var let javascript и о нем. Спасибо. Код теперь работает. В javascript не было ошибки msg.

Ответ №1:

Я отвечу на свой собственный вопрос. Я получил ответ благодаря @3limin4t0r в разделе комментариев.

Я совершил ошибку новичка. Я забыл let перед переменной init_data . В 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;
}