export 和export default的使用和區別

我主要是從vue項目使用常量和方法角度取分析，從具體例子出發

（在js中也可以導入其他js中的數據和方法）

涉及到HelloWord.vue和common.js兩個文件

一、使用export導出變量和方法

common.js

// 導出變量(方式1)
const myName = '小明'
const myEge = '18'
export {
  myName as myname, // 導入時只能myname，否則報錯
  myEge
}
// 導出變量(方式2)
export const myAdd = 'beijing'

// 導出方法(方式1)
const getMyEge = () => {
  return myEge
}
const getMyAdd = () => {
  return myAdd
}
export {
  getMyEge,
  getMyAdd
}
// 導出方法(方式2)
export function getMyName () {
  return myName
}

 HelloWord.vue

<template>
  <div class="hello">
      <div>{{myname}}</div><!--未定義直接使用會報錯，"myname" is not defined，必須在data或者computed中定義-->
      <div>{{myEge}}</div>
      <div>{{myadd}}</div>
  </div>
</template>

<script>
import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'
export default {
  name: 'HelloWorld',
  data () {
    return {
      myEge: myEge
    }
  },
  computed: {
    myadd () {
      return myadd
    }
  },
  mounted () {
    console.log(myname)
    console.log(myadd)
    console.log(getMyName())
    console.log(getMyName) // 執行方法必須后加括號，否則打印出來是ƒ getMyName() {eturn myName;}
    console.log(getMyEge())
  }
}
</script>

 先就export的使用總結一下下

在common.js中

1.export 導出變量和方法都有兩種方式

　　方式1：先定義再整體導出  export {}

　　方式2：一段代碼直接導出一個，如 export const a=1

2.使用方式1導出時是可以改變方法名或者變量名的,as英文翻譯'作為'，那么下面的示例就是，將myName 作為myname導出，后期在導入時就要使用myname，否則就會報錯

export {myName as myname}

在HelloWorld中

1.導入變量和方法

import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'

此處的myAdd as myadd同樣是將myAdd改成了myadd，使用時用myadd，方法名也是可以改的

2.導入的myname不能在{{myname}}使用，會報錯"myname" is not defined，需要在data或computed中定義賦值，

在js中可以直接使用console.log(myname)

3.console.log(getMyName) // 執行方法必須后加括號，否則打印出來是ƒ getMyName() {eturn myName;}

二、使用export default導出變量和方法

1.一個js只能使用一個export default

下面代碼使用兩個，在運行時就會報錯

// common.js
const myname = '小紅'
export default myname
const myname2 = '小紅'
export default myname2

2.export和export default是否可以同時出現

可以，使用不同的導入方式，可以得到export和export default相應的值

可以看以下驗證示例

const myname2 = '小紅1'
const myname = '小紅'
const myFun = () => {
  return myname2
}
export {
  myname2,
  myname
}

export default {
  myname2,
  myname,
  myFun,
  myFun2: function () {
    return myname
  }
}

<template>
  <div class="hello">
  </div>
</template>

<script>
import myname2, {myname2 as myname1} from '@/utils/common1'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  computed: {
  },
  mounted () {
    console.log(myname2)// {myname2: "小紅1", myname: "小紅"}
    console.log(myname2.myname2)// 小紅1
    console.log(myname1)// 小紅1
    console.log(myname2.myFun())// 小紅1
    console.log(myname2.myFun2())// 小紅
  }
}
</script>

三、export 和export default區別

1.export default 在同一個模塊中只能出現一次，export可以出現多次（export和export default 可同時使用）

2.導入方式不同，export導入需要加{}

3.export default const str = 'hello world'會報錯，export default后不能跟let const 等