vue之require與import之間的區別

首先我們要明白require與import的基本語法：

require的基本語法：在導出的文件中定義module.export,導出的對象的類型不予限定（可以是任何類型，字符串，變量，對象，方法），在引入的文件中調用require()方法引入對象即可，換一種說法就是require相當於module.exports的傳送門，module.exports后面的內容是什么，require的結果就是什么，對象、數字、字符串、函數……再把require的結果賦值給某個變量,代碼實現首先如：

// tt.js
module.exports = {
    tt: function(){
     console.log("這是一個函數，也就是一個對象")
  }
}

解析：在tt.js中使module這個意思就是模塊的意思，就是實現特定功能的一組方法，
也就是只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。用module.export中的export這個變量接收返回的函數名為tt的函數

然后：

/ bb.js中
var obj = require('../tt.js')
obj.tt()  // "這是一個函數，也就是一個對象"

解析：在bb.js中獲取到tt.js賦值給變量obj,然后調用該方法

本質上是將要導出的對象賦值給module這個的對象的export屬性，在其他文件中通過require這個方法訪問該屬性

• import的基本語法：

導出的對象必須與模塊中的值一一對應，就是導出的對象與整個模塊進行解構賦值，例如：

//tt.js中
export default{    //（這種方法是最常使用的方法,加入default關鍵字代表在import時可以使用任意變量名並且不需要花括號{}）
     b: function(){
         console.log("這是一個函數")
   }
}
  
export function(){  //導出函數
  
}
  
export {newF as aa ,bb,cc}  //  解構賦值語法(as關鍵字在這里表示將newF作為aa的數據接口暴露給外部，外部不能直接訪問aa)
  
//bb.js中
import  aa  from  '...'  //import常用語法（需要export中帶有default關鍵字）可以任意指定import的名稱
  
import {...} from '...'  // 基本方式，導入的對象需要與export對象進行解構賦值。
  
import aa as As from '...'  //使用as關鍵字，這里表示將aa代表Aa引入（當變量名稱有沖突時可以使用這種方式解決沖突）
  
import {a as Aa,b,c}  //as關鍵字的其他使用方法

require和import相互轉換使用：

import list from './list';
//等價於
var list = require('./list');

-------------------------------------------------------------------------

require和import分別使用在：

• require 是賦值過程並且是運行時才執行，也就是異步加載。
• require可以理解為一個全局方法，因為它是一個方法所以意味着可以在任何地方執行。
• import 是解構過程並且是編譯時執行。
• import必須寫在文件的頂部。

require和import的優缺點比較：

require的性能相對於import稍低，因為require是在運行時才引入模塊並且還賦值給某個變量，而import只需要依據import中的接口在編譯時引入指定模塊所以性能稍高。