vue初学者对于export 和 export default的一些思考

 export 和export default的区别

1.

• export default 只能有一个
• export 可以有多个 

2.

• export default 因为是值传递，所以可以匿名
• export 必须指明名字

3. 

• export 对应的import要加{ }
• export default 对应的import不用{ } ,import的名字默认为导出的匿名数据命名

export 的对象，方法或数据类型需要指定导出名称，且在import是需要加入大括号。

export default 导出的是值，import无需加大括号。

export default后面是大括号{ }则表示导出匿名对象

//a.js
//写法一：


const person = {
  name: 'lily',
  age: '16'
}

export default person
//export default {person} 这是我犯的错，就是因为没有理解 

//写法二：
export default{
name:'lily',
age:'16'
}

export default

export default{ }是说导出了一个对象，对象就避免不了属性和方法，属性就用key:value来表示，。所以里面的都是key:value这种方式出现的。而vue3的set up（） 就是方法，举个简单的例子如下

//a.js
export default{
name:'lily',
age:'16',
getAge () {
    console.log('get age function')
    return 'i should be 16';
  }}

而import { } from 这种方式是解构，解构啊，解构。一定要记得js里面有解构一说。

但是由于webpack和babel6之后的不支持，所以对于export 出来的对象，import不能直接解构，必须先整个引进来然后自己解构。如下

//---b.js---
import {name,age} from './a.js'//并不会生效。
//正确写法
import person from './a.js'
let{name,age} = person
    console.log(person)
	console.log(name)
	console.log(age);
	let result = person.getAge()
	console.log(result)

打印出的log为