vue.js里的export default是什么鬼

发布网友发布时间：2022-04-23 21:27

共2个回答

懂视网时间：2022-04-22 15:08

本篇文章给大家带来的内容是关于export和export default中的知识点介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

网上有很多关于export和export default的文章，他们大部门都是只讲了用法，但是没有提到性能，打包等关键的东西。
大家应该应该能理解import * from 'xxx'会把文件中export default的内容都打包到文件中，而import {func} from 'xxx' 只会把文件中的func导入，这样势必export会比export default打包的少。看例子

utils.js

const func1 = () => {
 console.log('func1');
}

const func2 = () => {
 console.log('func2');
}

export default {
 func1,
 func2
}

index.js

import { render } from "react-dom";
import common from './common';

class Index extends Component {
 render() {
 common.func1();
 return (
 123456
 );
 }
}

render(<Index />, document.getElementById('app'));

用这种export default的方法那么打包的文件会是怎么样的呢？我们看看

我们发现整个文件被打包了

用另一种方式
utils.js

const func1 = () => {
 console.log('func1');
}

const func2 = () => {
 console.log('func2');
}

export {
 func1,
 func2
}

index.js

import { render } from "react-dom";
import {func1} from './common';

class Index extends Component {
 render() {
 func1();
 return (
 123456
 );
 }
}

render(<Index />, document.getElementById('app'));

结果：

只打包了func1

综上export default确实可能会打包更多不需要的内容，但是在某些场景用export default更好。
所以总结如下：

1.当文件存放着很多方法，变量不同场景需要引用不同方法，请用export
2.当类只有某几个方法，并且每次引用都需要用到里面的大部分方法，请用export default，
 毕竟还有方法提示
3.当值导出一个方法，类请用export default
4.如果一个文件只会被某一个其他文件的子文件，不会被其他文件引用，并且其中的方法都会被用到，
 考虑用export default。比如某个业务文件夹下的action.js，用的时候用import api from './action';
 方便识别，不用重复在import的{}中添加，也可以用方法提示。
4.如果一个文件兼有以上需求 可以同时export和export default

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

热心网友时间：2022-04-22 12:16

在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。
具体使用：
1、
//demo1.js
export const str = 'hello world'

export function f(a){
return a+1
}

对应的导入方式：
//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号1212

2、
//demo1.js
export default const str = 'hello world'1212

对应的导入方式：
//demo2.js
import str from 'demo1' //导入的时候没有花括号

全部栏目

vue.js里的export default是什么鬼