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

1. export default:

   • 用于導(dǎo)出模塊的默認(rèn)值粉渠。
   • 可以在一個(gè)模塊中只有一個(gè) export default哈恰。
   • 在導(dǎo)入時(shí)，可以使用任意名稱來引用默認(rèn)導(dǎo)出的值臼氨。
   • 導(dǎo)入時(shí)可以省略花括號(hào) {}掺喻。

   示例：

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

2. export const:

   • 用于導(dǎo)出命名的常量或變量。
   • 可以導(dǎo)出多個(gè)常量或變量。
   • 在導(dǎo)入時(shí)感耙，需要使用相同的名稱引用導(dǎo)出的值褂乍。
   • 導(dǎo)入時(shí)需要使用花括號(hào) {} 包裹導(dǎo)入的值。

   示例：

   // 模塊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
   

需要根據(jù)使用場(chǎng)景和需求選擇適當(dāng)?shù)膶?dǎo)出方式即硼。如果你的模塊只導(dǎo)出一個(gè)默認(rèn)值树叽，可以使用 export default。如果你需要導(dǎo)出多個(gè)命名的常量或變量谦絮，可以使用 export const题诵。在導(dǎo)入時(shí)也要根據(jù)導(dǎo)出方式使用相應(yīng)的語法進(jìn)行導(dǎo)入。

當(dāng)涉及到模塊的導(dǎo)入和導(dǎo)出時(shí)层皱，除了 export default 和 export const性锭，還有其他一些常用的導(dǎo)出語法和導(dǎo)入方式。

其他導(dǎo)出語法包括：

1. 導(dǎo)出命名的函數(shù)或類：

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

2. 導(dǎo)出命名的變量：

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

3. 導(dǎo)出多個(gè)命名的變量或函數(shù)：

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

4. 導(dǎo)出時(shí)重命名：

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

除了 import 語句用于導(dǎo)入模塊之外叫胖，還有其他導(dǎo)入方式：

1. 導(dǎo)入默認(rèn)導(dǎo)出的值：

   import myName from './A.js';
   

2. 導(dǎo)入具名導(dǎo)出的值：

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

3. 導(dǎo)入所有導(dǎo)出的值到一個(gè)對(duì)象中：

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

進(jìn)階的技巧和用法：

1. 默認(rèn)導(dǎo)出和具名導(dǎo)出的混合使用：
   在一個(gè)模塊中草冈，可以同時(shí)使用默認(rèn)導(dǎo)出和具名導(dǎo)出。這種情況下瓮增，可以在導(dǎo)入語句中混合使用默認(rèn)導(dǎo)入和具名導(dǎo)入怎棱。

   示例：

   // 模塊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. 導(dǎo)出時(shí)重命名和導(dǎo)入時(shí)重命名的結(jié)合使用：
   可以在導(dǎo)出模塊時(shí)使用重命名，然后在導(dǎo)入模塊時(shí)再次進(jìn)行重命名绷跑。這種方式可以更靈活地控制導(dǎo)入和導(dǎo)出的命名拳恋。

   示例：

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

3. 導(dǎo)入和導(dǎo)出時(shí)使用別名：
   可以使用 as 關(guān)鍵字來創(chuàng)建導(dǎo)入和導(dǎo)出時(shí)的別名，以提高代碼的可讀性或避免命名沖突砸捏。

   示例：

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

• export default 用于導(dǎo)出模塊的默認(rèn)值谬运。一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出，而且在導(dǎo)入時(shí)可以使用任意名稱引用默認(rèn)導(dǎo)出的值垦藏。

• export const 用于導(dǎo)出命名的常量或變量梆暖。可以導(dǎo)出多個(gè)常量或變量掂骏，并且在導(dǎo)入時(shí)需要使用相同的名稱引用導(dǎo)出的值轰驳。

總結(jié)一下兩者的區(qū)別：

• export default 導(dǎo)出的是默認(rèn)值，導(dǎo)入時(shí)可以使用任意名稱弟灼。
• export const 導(dǎo)出的是具名的常量或變量级解，導(dǎo)入時(shí)需要使用相同的名稱。

對(duì)于在 Vue 中的使用袜爪，如果你只需要導(dǎo)出一個(gè)默認(rèn)的 Vue 組件或?qū)ο笕涑茫梢允褂?export default薛闪。如果你需要導(dǎo)出多個(gè)組件或?qū)ο笮凉荩梢允褂?export const。

### 干貨：關(guān)注我或微.信.公.眾.號(hào)：全棧思維導(dǎo)航，目前在寫一套開源項(xiàng)目（社交類）：基于Spring Boot + Vue3 + 小程序 + APP的開源項(xiàng)目昙篙。關(guān)注不錯(cuò)過＠白础！苔可！