在生成、导出、导入、使用 Vue 组件的时候,有些新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?

首先,Vue 是什么? 我的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:

new Vue({
el: '#app'
...
})

那么 export default {} 又是来干嘛的?

这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

所以在复用组件的时候,export 和 new Vue 缺一不可。

======================================================================

export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。

  export 和export default 的区别在于:export 可以导出多个命名模块,例如:

//demo1.js
export const str = 'hello world' export function f(a){
return a+1
}

  对应的引入方式:

//demo2.js
import { str, f } from 'demo1'

  export default 只能导出一个默认模块,这个模块可以匿名,例如:

//demo1.js
export default {
a: 'hello',
b: 'world'
}

  对应的引入方式:

//demo2.js
import obj from 'demo1'

  引入的时候可以给这个模块取任意名字,例如 "obj",且不需要用大括号括起来。

export default{} 和 new Vue()都是什么意思的更多相关文章

  1. export default {} 和new Vue()区别?

    export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于 new Vue({})部分, 只是创建一个Vue的实例 就是相当于创建一个根组件 h ...

  2. 关于 vue中 export default 和 new Vue({})

    对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module ...

  3. export default {} 和new Vue()区别

     1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于export default 和export的区别:  在JavaScript ...

  4. Vue 中 export及export default的区别

    相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...

  5. Vue 中 export default 和 module.exports

    export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default ...

  6. !!误解--var vm = new vue({}) 与 export default {} 是一回事儿??

    这两者完全不是同一回事.export default {} 是es6的module中的语法, 而var vm = new vue({}) 是创建一个vue实例.引起误解是因为用了webpack开发vu ...

  7. Vue的组件为什么要export default

    Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: 此外,你还可以在bulid/webpack.base.conf.js文件中修改相关配置 ...

  8. Vue中 export default 和 export 区别

    1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export ...

  9. vue中export default 在console中是this.$vm

    vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的exp ...

随机推荐

  1. centos 6.9 mysql 安装配置

    1.全新系统,安装mysql yum -y install mysql mysql-server mysql-devel 2.启动mysql service mysqld start 3.修改密码 登 ...

  2. mysql 无法远程连接 没有监听端口

    centos yum安装mysql: 远程连接完成用户授权和防火墙配置,可还是连接不上. 发现mysql没有监听3306端口. 修改mysql配置文件 vi /etc/my.conf 注释掉以下行,重 ...

  3. Html.Partial和Html.RenderPartial和Html.RenderAction区别

    1.Html.Partical 把View页或模板解析成字符串然后输出到渲染页面上 @Html.Partical("viewxxx") 2.Html.RenderPartical则 ...

  4. vmware14克隆后UUID相同的解决方法

    查看网卡 UUID值 [root@localhost network-scripts]# nmcli connection showNAME UUID TYPE DEVICE ens33 cf228d ...

  5. Python uuid库中 几个uuid的区别

    在用到uuid库的时候,发现uuid有很多个,比较好奇,就查了一下他们的区别 uuid1()——基于时间戳 uuid2()——基于分布式计算环境DCE(Python中没有这个函数) uuid3()—— ...

  6. [Git] 011 checkout 与 reset 命令的补充

    1. git checkout -- <file> 的示意 2. "checkout" 的补充 2.1 git checkout <branch_name> ...

  7. Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式

     Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式 1.使用ImageComboBoxEdit实现下拉框键值数据函数 publ ...

  8. C#开发 WinForm如何在选项卡中集成加载多个窗体 实现窗体复用

    http://blog.csdn.net/upi2u/article/details/37914909 最近需要做的一个项目,为了避免从菜单中选择的麻烦,需要把几个窗体集成到一起,通过TabContr ...

  9. 微信jssdk配置的问题,使用MVC制作的demo

    一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...

  10. mysqldump导入导出

    如果导入数据:使用mysqldump命令 导出数据和表的结构: 1.导出表数据和表结构 mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql(这个名字随便叫) #/usr/l ...