Vue中import和require的对比

Vue中import和require的对比

一、前言

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

二、import和require的核心概念

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

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

点击查看代码

   //a.js中
   export default{    //（最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{}）
        a: function(){
            console.log("impot的使用")
      }
   }
    
   export function(){  //导出函数
    
   }
    
   export {newA as a ,b,c}  //  解构赋值语法(as关键字在这里表示将newA作为a的数据接口暴露给外部，外部不能直接访问a)
    
   //b.js中
   import  a  from  '...'  //import常用语法（需要export中带有default关键字）可以任意指定import的名称
    
   import {...} from '...'  // 基本方式，导入的对象需要与export对象进行解构赋值。
    
   import a as biubiubiu from '...'  //使用as关键字，这里表示将a代表biubiubiu引入（当变量名称有冲突时可以使用这种方式解决冲突）
    
   import {a as biubiubiu,b,c}  //as关键字的其他使用方法

三、区别

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

四、Require优点

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