export default 和 export const 是 JavaScript 中用于導出模塊的兩種不同的導出語法。

1. export default:

   • 用于導出模塊的默認值。
   • 可以在一個模塊中只有一個 export default。
   • 在導入時，可以使用任意名稱來引用默認導出的值。
   • 導入時可以省略花括號 {}。

   示例：

   // 模塊A.js
   const name = 'John';
   export default name;
   
   // 模塊B.js
   import myName from './A.js';
   console.log(myName); // 輸出: 'John'
   

2. export const:

   • 用于導出命名的常量或變量。
   • 可以導出多個常量或變量。
   • 在導入時，需要使用相同的名稱引用導出的值。
   • 導入時需要使用花括號 {} 包裹導入的值。

   示例：

   // 模塊A.js
   export const name = 'John';
   export const age = 25;
   
   // 模塊B.js
   import { name, age } from './A.js';
   console.log(name); // 輸出: 'John'
   console.log(age);  // 輸出: 25
   

需要根據使用場景和需求選擇適當的導出方式。如果你的模塊只導出一個默認值，可以使用 export default。如果你需要導出多個命名的常量或變量，可以使用 export const。在導入時也要根據導出方式使用相應的語法進行導入。

當涉及到模塊的導入和導出時，除了 export default 和 export const，還有其他一些常用的導出語法和導入方式。

其他導出語法包括：

1. 導出命名的函數或類：

   export function myFunction() {
     // 函數邏輯...
   }
   
   export class MyClass {
     // 類定義...
   }
   

2. 導出命名的變量：

   export const myVariable = 'Hello';
   export let myOtherVariable = 42;
   

3. 導出多個命名的變量或函數：

   const name = 'John';
   const age = 25;
   export { name, age };
   

4. 導出時重命名：

   const myVariable = 'Hello';
   export { myVariable as greeting };
   

除了 import 語句用于導入模塊之外，還有其他導入方式：

1. 導入默認導出的值：

   import myName from './A.js';
   

2. 導入具名導出的值：

   import { name, age } from './A.js';
   

3. 導入所有導出的值到一個對象中：

   import * as myModule from './A.js';
   console.log(myModule.name);
   console.log(myModule.age);
   

進階的技巧和用法：

1. 默認導出和具名導出的混合使用：
   在一個模塊中，可以同時使用默認導出和具名導出。這種情況下，可以在導入語句中混合使用默認導入和具名導入。

   示例：

   // 模塊A.js
   export default 'Hello';
   export const name = 'John';
   
   // 模塊B.js
   import defaultGreeting, { name } from './A.js';
   console.log(defaultGreeting); // 輸出: 'Hello'
   console.log(name); // 輸出: 'John'
   

2. 導出時重命名和導入時重命名的結合使用：
   可以在導出模塊時使用重命名，然后在導入模塊時再次進行重命名。這種方式可以更靈活地控制導入和導出的命名。

   示例：

   // 模塊A.js
   const myVariable = 'Hello';
   export { myVariable as greeting };
   
   // 模塊B.js
   import { greeting as message } from './A.js';
   console.log(message); // 輸出: 'Hello'
   

3. 導入和導出時使用別名：
   可以使用 as 關鍵字來創建導入和導出時的別名，以提高代碼的可讀性或避免命名沖突。

   示例：

   // 模塊A.js
   const myVariable = 'Hello';
   export { myVariable as greeting };
   
   // 模塊B.js
   import { greeting as welcomeMessage } from './A.js';
   console.log(welcomeMessage); // 輸出: 'Hello'
   

• export default 用于導出模塊的默認值。一個模塊只能有一個默認導出，而且在導入時可以使用任意名稱引用默認導出的值。

• export const 用于導出命名的常量或變量。可以導出多個常量或變量，并且在導入時需要使用相同的名稱引用導出的值。

總結一下兩者的區別：

• export default 導出的是默認值，導入時可以使用任意名稱。
• export const 導出的是具名的常量或變量，導入時需要使用相同的名稱。

對于在 Vue 中的使用，如果你只需要導出一個默認的 Vue 組件或對象，可以使用 export default。如果你需要導出多個組件或對象，可以使用 export const。

### 干貨：關注我或微.信.公.眾.號：全棧思維導航，目前在寫一套開源項目（社交類）：基于Spring Boot + Vue3 + 小程序 + APP的開源項目。關注不錯過！！！