Vue中import和require的对比

Vue中import和require的对比

一、前言

​ vue框架想必是我们前端朋友们必学的知识点，说它难也没有那么难，说简单也没有那么简单，主要技术就是那么几个，可是里面的细节很多，有些时候我们会用但未必知道他为什么要这么用，原理是是什么，就比如我们最为常见的导入方式——import和require，很多时候我们都会用得比较混淆，为了更清楚地很轻两者的关系，博主就特地写了这篇博文。

二、import和require的核心概念

1. require：在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可。

2. import：导出的对象必须与模块中的值一一对应，即导出的对象与整个模块进行解构赋值

点击查看代码

三、区别

1. require 的使用过程就是赋值过程，并且只有运行时才执行，有更多的操作， 而import 是解构过程，并且是在编译时执行；
2. require可以理解为是一个全局方法，可以在文件中的任何位置执行，而import则必须要写在文件的顶部或被使用代码的上面，不能嵌套在条件语句中，不然会报错；
3. require的性能相对于import稍低，require是在运行时才引入模块并且还赋值给某个变量，而import需要依据import中的接口在编译时引入指定模块

四、Require优点

• 很好地实现js文件的异步加载，避免网页失去响应；
• 能够管理模块之间的依赖性，便于代码的编写和维护;
• 使用起来简单直接，它相当于是module.exports的一个传送门，把module.exports后面的内容是传给require的结果；
• 性能相对要高一些。