Vue2中的 import 和 require区别与使用方法

import属于 ES6 规范，require 属于 CommonJS 规范。

一、export default & export + import

1、export default function() + import

output.js

export default function () {
    console.log('我是export default 的函数');
}

 demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export default 时
// import 的名字可以任意起,不加{}
// 因为export default 的和 import 的是一个引用，所以可以重命名
import mytest from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mytest();
  },
  methods: {},
};
</script>

运行结果：

 

 2、export function  pName () + import

output.js

export function printName(name) {
    console.log('我是export的函数，名字是' + name);
}

 demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export时
// import 的名字必须和 export 的名字一致，必须加{}
// export 和 import 的是同一个对象，所以不能重命名
import { printName } from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    printName("alice");
  },
  methods: {},
};
</script>

运行结果：

 3、export default object+ import

output.js

const person = {
    name: "Alice",
    age: 30,
    sex: "female",
    sayHi: function () {
        console.log("hello world");
    }
}
export default person

 demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export default 时，不加{}
// import 的名字可以任意起,不加{}
// 因为export default 的和 import 的是一个引用，所以可以重命名
import person22 from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(person22);
    person22.sayHi();
  },
  methods: {},
};
</script>

运行结果：

 4、export {info,name} + import

 output.vue

const info = "i am info string";
const name = "Alice";
export {info, name};

demo.js

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export时，必须加{}
// import 的名字必须和 export 的名字一致，必须加{}
// export 和 import 的是同一个对象，所以不能重命名
import { info, name } from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(info);
    console.log(name);
  },
  methods: {},
};
</script>

运行结果：

5、export & import 解释说明

• import 属于 ES6 规范
• exoprt 和 export default 也是ES6规范
• export 是导出, export dafault 是默认导出
• 一个模块可以有多个export, 但是只能有一个export default
• export default可以和多个export共存

 

二、module.exports & exports.xxx + require

 1、module.exports & require

output.js

const name1 = "Alice";
const person = {
    name: "lilith",
    age: 1000,
    sex: "female",
    sayHi: function () {
        console.log("Hi, I am lilith");
    }
}
module.exports = {
    name1, person
}

 demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // exports.xxx 是 module.exports一种简写形式
    // exports.xxx 是 module.exports 不要混用
    const mydata = require("../assets/js/output.js");
    console.log({ mydata });
    console.log(mydata.name1);
    mydata.person.sayHi();
  },
};
</script>

运行结果：

 2、exports.xxx & require

output.js

const name1 = "Alice";
const person = {
    name: "lilith",
    age: 1000,
    sex: "female",
    sayHi: function () {
        console.log("Hi, I am lilith");
    }
}
exports.name1 = name1;
exports.person = person;

 demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // exports.xxx 是module.exports一种简写形式
    // exports.xxx 是module.exports 不要混用
    const mydata = require("../assets/js/output.js");
    console.log({ mydata });
    mydata.person.sayHi();
  },
};
</script>

运行结果：

 

 3、exports & require 解释说明

• require 属于 CommonJS 规范
• require是运行时调用,所以是动态执行的，所以在性能上会比import差一些.
• 导出时是什么样, require 导入时就还是什么样
• exports是module.exports一种简写形式,不能直接给exports赋值
• 直接给module.exports赋值时,exports会失效

参考文档：

[1] https://juejin.cn/post/6844903912487518221
[2] https://juejin.cn/post/6844904080955932680#heading-8