Vue中 export default 和 export 区别

1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中,export、import可以有多个,export default仅有一个
3.通过export方式导出,在导入时要加{ },export default则不需要

4.

(1) 输出单个值,使用export default

(2) 输出多个值,使用export

(3) export default与普通的export不要同时使用

示例:

1.export
//a.js
export const str = "blablabla~";
export function log(sth) {
  return sth;
}
对应的导入方式:

//b.js
import { str, log } from ‘a‘; //也可以分开写两次,导入的时候带花括号

2.export default
//a.js
const str = "blablabla~";
export default str;
其实此处相当于为str变量值"blablabla"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
对应的导入方式: //b.js import str from ‘a‘; //导入的时候没有花括号
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
 

import的文件会自动执行一次。

import会加载且仅加载一次导入的模块

ES6模块化与commonjs、amd区别:

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

模块化统一:

原文地址:https://www.cnblogs.com/xtjatswc/p/10311980.html

时间: 2024-10-29 19:08:30

Vue中 export default 和 export 区别的相关文章

export ,export default 和 import 区别 以及用法

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块. 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export和import(一个导出一个导入) 一个a.js文件有如下代码: export

export default和export的使用方式

在node中使用 var 名称=require('模块标识符') 来导入 module.exports 和exports 来暴露成员 在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块 ES6中导入模块,使用import 模块名称 from ‘模块标识符’       import '标识路径' ES6中暴露成员,使用export default 和 export export default向外暴露的成员,可以使用任意的变量来接收 例子:var info={name:"faker&

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s

export default 和 export 区别

1.export与export default均可用于导出常量.函数.文件.模块等 2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用 3.在一个文件或模块中,export.import可以有多个,export default仅有一个 4.通过export方式导出,在导入时要加{ },export default则不需要 使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名 原文地

export default 和 export 的使用方式

1.ES6规定,导入模块使用 import 模块名称 from '模块标识符'; 或 import 'css资源路径':      ES6中,使用export default {name:'zs'}和export向外暴露成员. 在Node中,使用 var 名称 = require('模块标识符');来导入模块:使用module.exports= {name:'zs'}和exports来暴露成员 2.组件register.vue里面暴露数据 <template> <div> <

export default 和export

export 用户需要知道所要加载的变量名或函数名,否则无法加载以及必须使用{}来进行加载 export default 模块指定默认输出 // export-default.js export default function () { console.log('foo'); } // import-default.js import customName from './export-default'; customName(); // 'foo' 上面代码是一个模块文件export-def

vue中$route 和$router的区别

在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的区别傻傻的分不清 1.先说$router这个就是router的实例, 在创建vueRouter实例 const router=new VueRouter({ routes }) $router就是这个实例 而$route是$router中的一个一个对象 只想要导航到name,query,params等 原文地址:ht

简述vue中v-if和v-show的区别

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中不存在这个dom元素,以此达到隐藏的效果:    所以v-if在每次切换的时候都会重新创建或者销毁元素,有较高的切换性能消耗: 而且v-if是惰性的,如果在初始渲染时条件为假,那就什么也不做,直到条件第一次变为真时,需要渲染时才会开始渲染条件块 v-show v-show则是无论你的初始条件是什么,

Vue中computed和watch的区别

目录 计算属性computed 侦听属性watch @(目录) 计算属性computed 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,多对一或者一对一,一般用computed 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 支持缓存,只有依赖数据发生改变,才会重新进行计算 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的 如果computed属性属性值是函数,那么默认会走get方法: