Vue 中导入 JS 数据的方法

在Vue开发中，经常会遇到需要导入外部JavaScript数据的情况。掌握正确的导入方法，能让我们的代码结构更清晰，开发效率更高。下面将介绍几种常见的在Vue中导入JS数据的方法。

一、直接导入

如果数据是一个简单的JavaScript对象或数组，可以直接在Vue组件中使用 import 语句导入。例如，有一个名为 data.js 的文件，内容如下：

export const myData = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
];

在Vue组件中，可以这样导入并使用：

<template>
  <div>
    <ul>
      <li v-for="item in myData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { myData } from './data.js';

export default {
  data() {
    return {
      myData
    };
  }
};
</script>

二、通过模块导入

如果数据是一个复杂的JavaScript模块，可能包含函数、类等，可以使用模块导入的方式。假设我们有一个 utils.js 文件，里面有一些工具函数：

export function add(a, b) {
  return a + b;
}

在Vue组件中导入并使用：

<template>
  <div>{{ result }}</div>
</template>

<script>
import { add } from './utils.js';

export default {
  data() {
    return {
      result: add(2, 3)
    };
  }
};
</script>

三、动态导入

在某些情况下，我们可能需要根据条件动态导入数据。Vue提供了动态导入的功能，可以使用 import() 函数来实现。例如：

<template>
  <div>
    <button @click="loadData">加载数据</button>
    <ul v-if="myData">
      <li v-for="item in myData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myData: null
    };
  },
  methods: {
    async loadData() {
      const dataModule = await import('./data.js');
      this.myData = dataModule.myData;
    }
  }
};
</script>

通过以上方法，我们可以灵活地在Vue中导入JS数据，满足不同的开发需求。