Vue中import和require的对比

作者: 小麦

更新时间:2022-03-26 13:40:04

4752 阅读

Vue中import和require的对比

一、前言

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

二、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的结果;
  • 性能相对要高一些。

版权声明:本文著作权归作者【小麦 】所有,不代表本网站立场。

侵权请联系:root_email@163.com

相关推荐