Vue export & export default & import 总结

简介: Vue export & export default & import 总结

Vue export & export default & import 总结


 

1.   实践环境

Vue 2.9.6

 

2.   简介

在ES6中,export与export default均可用于导出变量(含常量)、函数、类、文件、模块等,然后在其它文件或模块中通过import 变量(含常量)|函数|类|文件|模块名的方式,将其导入,以便能够对其进行使用。

 

3.   export & import

一个模块就是一个独立的文件,该文件内部的内容,外部无法获取。如果希望外部能够读取模块内部的内容,比如某个变量,就必须使用export关键字导出该变量,然后在其它模块中通过import方式导入使用。

假设module1.jsmodule2.js在同一个目录下。

导出\导入变量

// module1.js

export var author = "shouke"

export var addr = "sz"

 

// 等价写法

var author = "shouke"

var addr = "sz"

 

export { author, addr }

 

// module2.js

// 导入变量

import { author, addr } from "./module1"

 

// 也可以分开写

import { author } from "./module1"

import { addr } from "./module1"

 

 

// 引用变量

let temp = "addr of " + author + " is " + addr

console.log(author) // 输出 "shouke"

console.log(addr) // 输出 "sz"

console.log(temp) // "输出 addr of shouke is sz"

 

--------------------------------------------------------

// module1.js

var addr = "sz"

 

// 按别名导出

export { addr as address}

 

// module2.js

// 导入变量

import { address } from "./module1"

 

--------------------------------------------------------

// module1.js

var addr = "sz"

 

export { addr }

 

// module2.js

//使用as关键字给导入的变量重新取一个名字

import { addr as address } from "./module1"

console.log( myaddr)

 

注意:

1)   上面代码在export命令后面,使用大括号指定所要导出的一组变量、函数。它与前一种写法(直接放置在var语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚导出了哪些变量。

2)   import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(例中为module1.js)中导出的变量名称相同。

3)   import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。

常见的 import xxx from "@/someDir/someModule",这里 @ 默认代表 src目录,之所以这样,是因为在build/webpack.base.conf.js文件中做了对应配置,如下

 resolve: {

   extensions: ['.js', '.vue', '.json'],

   alias: {

     'vue$': 'vue/dist/vue.esm.js',

     '@': resolve('src'),

   }

 },

4)   import命令具有提升效果,会提升到整个模块的头部,在编译阶段,在代码运行之前执行的

5)   如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

6)   import命令导入的变量都是只读的,不能对它进行修改。

import { addr } from "./module1"

addr = "other" // 报错 "addr" is read-only,import 命令导入的变量都是只读的,不能对它进行修改

当如,如果导入的是一个对象,则可以更改对象的属性

import {object} from './xxx.js'

object.atrr = 'hello'; // 合法操作

上面代码中,object的属性可以成功改写,并且其他模块也可以读到改写后的值。不过,这种写法很难查错,建议凡是输入的变量,都当作完全只读,轻易不要改变它的属性。

7)   export命令可以出现在模块的任何位置,只要处于模块顶层就可以

 

导出\导入函数

// module1.js

export function myfunc() {

   console.log("run myfunc");

}

 

// 等价写法

function myfunc() {

   console.log("run myfunc");

}

 

export { myfunc }

 

// module2.js

// 导入函数

import { myfunc } from "./module1"

 

// 调用函数

myfunc()

 

--------------------------------------------------------

// 按别名导出

// module1.js

function myfunc() {

   console.log("run myfunc");

}

 

export { myfunc as func}

 

// module2.js

// 导入函数

import { func } from "./module1"

 

// 调用函数

func()

 

--------------------------------------------------------

// module1.js

export function myfunc() {

 console.log("run myfunc")

}

 

// module2.j

//使用as关键字给导入的函数重新取一个名字

import { myfunc as func } from "./export"

 

func()

 

 

整体导入

import使用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

// module1.js

function myfunc1() {

 console.log("run myfunc1")

}

 

function myfunc2() {

 console.log("run myfunc2")

}

export { myfunc1, myfunc2}

 

// module2.js

// 整体导入

import * as myfunc from "./module1"

 

// 函数调用

myfunc.myfunc1()

myfunc.myfunc2()

 

 

 

4.   export default && import

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

// module1.js

export default function () {

 console.log("run myfunc")

}

 

// module2.js

// import customName from "./export"

// customName()

import func from "./export"

 

func()

 

// export defualt 也可以用于非匿名函数

// module1.js

export default function myfunc() {

 console.log("run myfunc")

}

 

// 或者

function myfunc() {

 console.log("run myfunc")

}

 

export default myfunc

 

-----------------------------------------

//export default和export同时使用

// module1.js

export function func() {

 console.log("run func")

}

 

function myfunc() {

 console.log("run myfunc")

}

 

export default myfunc

 

 

// module2.js

import myfunc, { func } from "./export"

 

func()

myfunc()

 

 

如上,模块文件module1.js的默认导出是一个匿名函数。其它模块使用import命令加载该模块时,可以为该匿名函数指定任意名称。

需要注意的是,导出模块使用了export default时,导入模块import命令后面,不使用大括号。

上面代码中,myfunc函数的函数名myfunc,在模块外部是无效的。加载的时候,视同匿名函数加载。

 

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。

// modules.js

function add(x, y) {

 return x * y;

}

export {add as default};

// 等同于

// export default add;

 

// app.js

import { default as foo } from 'modules';

// 等同于

// import foo from 'modules';

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确

export var a = 1;

 

// 正确

var a = 1;

export default a;

 

// 错误

export default var a = 1;

上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错。

同样地,因为export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。

// 正确

export default 42;

 

// 报错

export 42;

上面代码中,最后一句报错是因为没有指定对外的接口,而前一句指定对外接口为default。

5.   import()

import()函数用于完成动态加载。

import(specifier)

参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。

import()函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。 import()类似于 Node 的require方法,区别主要是前者是异步加载,后者是同步加载。

6.   参考链接

http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4


目录
相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
4天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
25 1
|
28天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
31 1
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1061 0
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
27 1
vue学习第三章