Vue 导入 JS 的两种方式及示例剖析

在 Vue 项目中，导入外部 JavaScript 文件是常见的操作，这有助于实现代码的复用和模块化。下面将详细介绍 Vue 中导入 JS 的两种主要方式，并通过示例进行深入剖析。

方式一：使用 ES6 的模块导入（import）

在 Vue 组件中，可以使用 ES6 的 import 语法来导入 JavaScript 模块。例如，如果有一个名为 utils.js 的文件，其中包含一些工具函数，我们可以这样导入：

import utils from './utils';

在这个示例中，'./utils' 表示相对路径，指向与当前组件同一目录下的 utils.js 文件。通过这种方式，我们可以方便地使用 utils 中导出的函数、对象或变量。

方式二：通过 script 标签引入

在 Vue 的单文件组件（.vue）中，还可以在 <script> 标签中使用传统的 <script src="..."></script> 方式引入外部的 JavaScript 文件。

<script src="./utils.js"></script>

需要注意的是，使用这种方式引入的脚本，其中的变量和函数在全局范围内可用，可能会导致命名冲突或污染全局作用域。在实际开发中，应谨慎使用这种方式，特别是在大型项目中。

下面通过一个具体的示例来展示这两种导入方式的应用。

假设我们有一个 calculate.js 文件，其中包含一个计算两个数之和的函数：

export function addNumbers(num1, num2) {
  return num1 + num2;
}

在 Vue 组件中，如果使用 ES6 的 import 方式，可以这样调用：

import { addNumbers } from './calculate';

export default {
  methods: {
    performCalculation() {
      const result = addNumbers(5, 10);
      console.log(result); 
    }
  }
}

而如果通过 <script src="./calculate.js"></script> 引入，那么在组件的任何地方都可以直接调用 addNumbers 函数。

Vue 中导入 JS 的两种方式各有特点和适用场景。ES6 的模块导入方式更加规范、易于管理依赖和避免命名冲突；而通过 script 标签引入则相对简单直接，但需要注意全局作用域的问题。在实际项目开发中，应根据具体需求和项目结构选择合适的导入方式，以提高代码的可维护性和可扩展性。