export default 和export的區別？

   export命令，為模組指定預設輸出。
   一個模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用export關鍵字輸出該變數。

下面demo說明使用：

這是一個js檔案1:
      
      寫法一:（推薦）
        const name = "許清源";
        const getData = ((a) => {
            a = '11';
            return a
        })
        const Obj = {
            aa: '001',
            bb: '002'
        }
        export {name,getData,Obj }

      寫法二:
        export const name = "許清源";
        export const getData = ((a) => {
            a = '11';
            return a
        })
        export const Obj = {
            aa: '001',
            bb: '002'
        }
       

在js檔案2中使用import引入:
       寫法一:（推薦）     優點:沒必要像寫法二那樣必須需要知道js1檔案中定義的那些變數，方法，物件

          1.總體全部引入使用as表示允許你為它取任意名字；
              import * as allDefineData from '.js1'
              console.log( allDefineData.name,  ( allDefineData.getData )(),  allDefineData.Obj )

          2.單個引入需要新增 { }
              import { Obj as NewObj } from '.js1'
              console.log( NewObj.aa , NewObj.bb )


       寫法二:(常規引入)； 缺點:引入之前需要知道js1檔案中定義的那些變數，方法，物件
              import { name, getData, Obj } from '.js1'
              console.log( name,  getData(),  Obj )

 

    export default命令，為模組指定預設輸出。
    為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。

下面demo說明使用：

這是一個js檔案1:
      
      寫法:
        export default  {
            age: '25',
            get(a = 1) { 
                return a
            },
            arr: [1,2,3,4,5]
        }

      
       

在js檔案2中使用import引入:
       寫法一:（推薦）    
              import List from './js1';
              console.log( List.age,  ( List.get )(),  List.arr )

          
       寫法二: 
              import { default as List }  from '.js1'
              console.log( List )


       寫法三: 
              import * as List  from '.js1'
              console.log( List )


 

簡單總結：

export命令對外介面是有名稱的且import命令從模組匯入的變數名與被匯入模組對外介面的名稱相同，而export default命令對外輸出的變數名可以是任意的，這時import命令後面，不使用大括號。

export default命令用於指定模組的預設輸出。顯然，一個模組只能有一個預設輸出，因此export default命令只能使用一次。所以，import命令後面才不用加大括號，因為只可能唯一對應export default命令。