VUE中的export default和export使用方法解析

下面就为您详细讲解Vue中的export default和export使用方法解析。

1. `export`和`export default`的区别

在Vue中，我们常常使用export和export default来导出模块。它们的作用是相同的，都是用来将模块暴露给其他模块使用的。

不同的是，使用export导出的模块需要通过import {模块名} from '模块地址'的方式引入，而使用export default导出的模块可以直接通过import 模块名 from '模块地址'的方式引入。

下面是一些具体的例子，来感受一下两者的区别。

1.1. `export`语法

//模块定义
export const a = 123;
export function test() {
    console.log("这是test函数");
}
export class MyClass {
    constructor() {
        console.log("这是MyClass类的构造函数");
    }
}

//模块引用
import { a, test, MyClass } from './test';             //引用方式1
import * as testModule from './test';                  //引用方式2
console.log(a);                                       //输出：123
test();                                               //输出：这是test函数
const myClass = new MyClass();                        //输出：这是MyClass类的构造函数

1.2. `export default`语法

//模块定义
const b = 123;
export default b;

//模块引用
import b from './test';                                //引用方式1
import test from './test';                             //引用方式2
import * as testModule from './test';                  //引用方式3
console.log(b);                                       //输出：123
console.log(test);                                    //输出：123

2. 使用`export`和`export default`的注意事项

2.1. `export`语法的注意事项

export语句必须处于模块的顶部。
export语句必须有具体的标识符（如常量、函数、类）或者是变量。
export语句可以使用as关键字来重命名导出的模块。

示例如下：

//导出的模块
const a = 123;
export { a as myA };

//引用导出的模块
import { myA } from './test';
console.log(myA);                                     //输出：123

2.2. `export default`语法的注意事项

在一个js文件中，只能使用一次export default语法。
export default语句既可以导出表达式，也可以是类、函数等。
export default语句不支持使用as关键字来重命名导出的模块。

示例如下：

//导出的模块
export default {
    name: "小明",
    age: 18
}

//引用导出的模块
import person from './test';
console.log(person);                                   //输出：{ name: "小明", age: 18 }