vue之require與import之間的區別

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

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

// tt.js
module.export = {
    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中的接口在編譯時引入指定模塊因此性能稍高。