Export and Export default can both export constants, functions, files, modules, etc., but what’s the difference?

Export: In a file or module, export can support more than one file or module. If you export a file using export, you need to add [{}], but export default does not

Export Default: Supports only one export default in a file or module. Ex. :

Export Export and import :utils/index.js

/ * * * * @ time resolved as string param {(Object | string | number)} time * @ param cFormat * @ returns {string} {string | null} * / export function parseTime(time, cFormat) { if (arguments.length === 0 || ! time) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else { if ((typeof time === 'string')) { if ((/^[0-9]+$/.test(time))) { // support "1548221490638" time = parseInt(time) } else { // support safari // https://stackoverflow.com/questions/4310953/invalid-date-in-safari time = time.replace(new RegExp(/-/gm), '/') } } if ((typeof time === 'number') && (time.toString().length === 10)) { time = time * 1000 } date = new Date(time)  } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() } const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { const value = formatObj[key] // Note: GetDay () returns 0 on Sunday if (key = = = 'a') {return [' day ', 'a', '2', '3', '4', '5', '6 '][value]} return value.toString().padStart(2, '0') }) return time_str}/** * @param {number} time * @param {string} option * @returns {string} */export function formatTime(time, option) { if (('' + time).length === 10) { time = parseInt(time) * 1000 } else { time = +time } const d = new Date(time) Const now = date.now () const diff = (now -d) / 1000 if (diff < 30) {return 'just'} else if (diff < 3600) {// less 1 Hour return math.ceil (diff / 60) + 'minutes ago'} else if (diff < 3600 * 24) {return math.ceil (diff / 3600) + 'hours ago'} else if (diff < 3600 * 24 * 2) {return '1 day ago '} if (option) {return parseTime(time, Option)} else {return (d.getMonth() + 1 + 'month' + D.getdate () + 'day' + D.gethours () + 'hour' + D.getminutes () + 'minute')}}Copy the code

index.vue

import { formatTime } from '@/utils'

formatTime(this.date)
Copy the code

Export default Export and import :utils/index.js

const func1 = () => { console.log('func1'); }const func2 = () => { console.log('func2'); }export default { func1, func2}Copy the code

index.vue

import common from '@/utils';

common.func1()
Copy the code

1, export and export default can be used in derived constants, function, file, module, etc. 2, you can be in other documents or in the module through the import + (constant) | | | function file module name, import it, to be able to use 3, in a file or module, 4. Export by export, add {} when importing, export default is not needed. Export default specifies the default output for the module. This eliminates the need to know the variable name of the module being loaded

5. Performance: Import of export: import on demand and package only the imported files, import of Export default: the whole file will be packaged