因为项目要使用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不行。

Logo

前往低代码交流专区

更多推荐