VUE 中require 与impor 之间的区别

require 与import 之间的区别：

在es6 之前的语法是没有模块（module）这一说法，在之前编写前端代码只能通过不同引入*.js 文件来解决。

问题：

如下：html文件所示：<script type="text/javascript" src="/res/jquery/jquery.js?v=2020.1"></script>。这样编写小前端项目不会发生什么问题，但是随着前端功能不断添加，会导致项目结构臃肿且不利于维护。

解决方法：在es6 发布后，引入require的概念之后又添加import 的概念。目的：实现功能代码的模块化管理，更有利于功能模块的组件化开发和维护。

require 与import 基本语法与特征：

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

示例：

//a.js中定义prin 数据功能函数
module.export = {
    prin: function(){
     console.log(666)
  }
}

//b.js中调用a.js 文件中prin输出函数
var obj = require('../a.js')
obj.prin()  //666

 

import 基础语法：导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行结构赋值

//a.js中
export default{    //（最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{}）
     a: function(){
         console.log(666)
   }
}

//b.js中
import  a  from  '...'  //import常用语法（需要export中带有default关键字）可以任意指定import的名称

两者之间的区别：

一、require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行。