为什么.vue文件需要使用export default
因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我:(1)首先就是.vue结尾的文件为何需要export default,就像下面的代码一样?(2)为什么data需要return,我不用return,直接 data(){menu:MENU.data,poi:POILIST.data}不行吗?这两个问题问了几个人都不能给我合理的解释,求懂的兄弟们给个帮助,谢谢了。<script
因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我:
(1)首先就是.vue结尾的文件为何需要export default,就像下面的代码一样?
(2)为什么data需要return,我不用return,直接
data(){
menu:MENU.data,
poi:POILIST.data
}
不行吗?
这两个问题问了几个人都不能给我合理的解释,求懂的兄弟们给个帮助,谢谢了。
<script>
import { POILIST, MENU } from '../config/vuex.js';
export default {
data() {
return {
menu: MENU.data,
poi: POILIST.data
}
},
methods: {
set() {
MENU.list.push('首页');
POILIST.list.push({
lng: 124.1,
lat: 42.3
});
}
}
}
</script>
解答疑惑
export default是ES6的语法,意思是将这个东西导出,你要import 引入东西,导出了才能引用,data是一个函数是因为data是被很多组件共享的,如果 data 是一个的对象的话,每次实例化会造成所有的实例共享引用同一个数据对象,如下
var fnc= function() {}
fnc.prototype.data = {
a: 1,
b: 2,
}
var fnc1 = new fnc()
var fnc2 = new fnc()
fnc1.data.a === fnc2.data.a // true
fnc2.data.b = 1;
fnc2.data.b // ==1
data 是函数的话,每次创建一个新实例后,调用 data 函数,用return返回初始数据的一个全新副本数据对象,就避免了所有实例共享引用同一个数据对象。
原为链接https://segmentfault.com/q/1010000010893416
补充:import xxx from 和 import {xxx} from 区别
import FunName from './xxx'
export default function funName() {
return fetch({url: 'xxx', method: 'get'})
}
import {FunName} from './xxx'
export function funName() {
return fetch({url: 'xxx', method: 'get'})
}
区别:
1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中,export、import可以有多个,export default仅有一个
3、通过export方式导出,在导入时要加{ },export default则不需要
4、export能直接导出变量表达式,export default不行。
更多推荐
所有评论(0)