Detailed explanation of the difference between require and import in vue

Difference between require and import in vue

First of all, we need to understand the basic syntax of require and import:

The basic syntax of require: define in the exported file, and the type of the exported object is not limited (can be any type, string, variable, object, method). Just call the require() method in the imported file to introduce the object. In other words, it is the portal equivalent of requires. What is the content behind it, what is the result of require, objects, numbers, strings, functions... and then assign the result of require to a variable. The code implementation first is:

// 
 = {
    tt: function(){
     ("This is a function, that is, an object")
  }
}

Analysis: In the module means module, it means a set of methods to implement specific functions, that is, as long as different functions (and variables that record states) are simply put together, it is considered a module. Use the export variable in the received function with the returned function named tt

Then:

// middlevar obj = require('../')
()  // "This is a function, that is, an object"

Analysis: Get the assigned value to the variable obj, and then call the method

Essentially, it assigns the object to be exported to the export property of the object of module, and accesses the property in other files through the require method

Basic syntax of import:

The exported object must correspond one by one to the values ​​in the module, that is, the exported object is deconstructed and assigned to the entire module, for example:

//middleexport default{    // (This method is the most commonly used method. Adding the default keyword means that any variable name can be used when importing and no curly braces are required {})     b: function(){
         ("This is a function")
   }
}
export function(){  //Export function}
export {newF as aa ,bb,cc}  // Deconstruct the assignment syntax (the as keyword here means exposing newF as aa's data interface to the outside, and the outside cannot directly access aa)//middleimport  aa  from  '...'  // Common import syntax (requires the default keyword in export) You can specify the name of the import at willimport {...} from '...'  // Basic method, the imported object needs to be deconstructed and assigned to the export object.import aa as As from '...'  //Use the as keyword, here means that aa represents Aa (this way to resolve conflicts can be used when there is a conflict in variable names)import {a as Aa,b,c}  //asOther ways to use keywords

Require and import convert each other to use:

import list from './list';
//Equivalent tovar list = require('./list');

Require and import are used respectively in:

• require is an assignment process and is executed at runtime, that is, asynchronous loading.
• require can be understood as a global method, because it is a method so it means it can be executed anywhere.
• import is a deconstruction process and is executed at compile time.
• The import must be written at the top of the file.

Comparison of advantages and disadvantages of require and import:

The performance of require is slightly lower than that of import, because require only introduces modules at runtime and also assigns value to a certain variable, and import only needs to introduce specified modules at compile time based on the interface in import, so the performance is slightly higher.

This is the end of this article about the details of the difference between require and import in vue. This is the end. For more information about the difference between require and import, please search for my previous articles or continue to browse the related articles below. I hope everyone will support me in the future!