Vue中import和require的對比
一、前言
vue框架想必是我們前端朋友們必學的知識點，說它難也沒有那么難，說簡單也沒有那么簡單，主要技術就是那么幾個，可是里面的細節很多，有些時候我們會用但未必知道他為什么要這么用，原理是是什么，就比如我們最為常見的導入方式——import和require，很多時候我們都會用得比較混淆，為了更清楚地很輕兩者的關系，博主就特地寫了這篇博文。
二、import和require的核心概念
-
require：在導出的文件中定義module.export,導出的對象的類型不予限定（可以是任何類型，字符串，變量，對象，方法），在引入的文件中調用require()方法引入對象即可。
-
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關鍵字的其他使用方法
三、區別
- require 的使用過程就是賦值過程，並且只有運行時才執行，有更多的操作， 而import 是解構過程，並且是在編譯時執行；
- require可以理解為是一個全局方法，可以在文件中的任何位置執行，而import則必須要寫在文件的頂部或被使用代碼的上面，不能嵌套在條件語句中，不然會報錯；
- require的性能相對於import稍低，require是在運行時才引入模塊並且還賦值給某個變量，而import需要依據import中的接口在編譯時引入指定模塊
四、Require優點
- 很好地實現js文件的異步加載，避免網頁失去響應；
- 能夠管理模塊之間的依賴性，便於代碼的編寫和維護;
- 使用起來簡單直接，它相當於是module.exports的一個傳送門，把module.exports后面的內容是傳給require的結果；
- 性能相對要高一些。