new Vue()和export default{}区别

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

new Vue()

首先，Vue 是什么？

我看其他博主的理解，很是赞同-> Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

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

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

export default{}

export default{}又是什么呢？

ES6 Module语法中的命令，是为了方便 使用import命令时必须要知道所加载的变量名或函数名，否则无法加载的问题。

详情可查看这里

export default命令并不是在每个文件中都是必须的。它的作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入使用的。

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

所以经过查证，发现两者之间是没有任何联系的。

import,export和export default注意问题

A.在公用js中，多个方法需要调用的话，可以在vue项目中进行export default，抛出一个变量，然后在vue中引入后来调用使用

1、common.js中

? ? var common = {
? ? //密码检测
? ? ? checkPassword:function(password) {
? ? ? },
? ? ? //微信环境支持
? ? ? verifyWechat:function () {
? ? ? },
? ? ? // ?手机号码检测
? ? ? checkPhone:function (param_str) { ?
? ? ? }
? ? };
? ? export default common;

2、在main.js中全局引用

import ?common from ?'../static/js/common'
?Vue.prototype.$common= common;

3、在vue中引用该方法

if(!this.$common.checkPhone(this.nameValue)){
}

B.在公用js中，单个方法需要调用的话，可以在vue项目中进行export，抛出方法名，然后在vue中引入后来调用使用

1、common.js中

? ? //密码检测
? ? ? function checkPassword(password) {
? ? ? },
? ? ? //微信环境支持
? ? ? function verifyWechat() {
? ? ? },
? ? ? // ?手机号码检测
? ? ? function checkPhone(param_str) { ?
? ? ? }
? ? };
? ? export{
? ? ? ? common
? ? };

3、在vue中引用该方法

import {common} from ?'../static/js/common'
?if(!common.checkPhone(this.nameValue)){
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。