为什么.vue文件需要使用export default

Question

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

Answer 1

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返回初始数据的一个全新副本数据对象，就避免了所有实例共享引用同一个数据对象。

Answer 2

1..vue的文件可以看成是一个组件，export default 只是为了导出去，说明这个.vue是可以被别的组件import 的。

2.data里需要写return的原因，文档里写的很明白。

Answer 3

为什么需要export default一个Object呢？
例如这样：

export default {
    name: 'ElSelect',
    data() {
        return {
            values: []
        }
    }
    // ...
}

其实导出的这个对象就是一个组件的选项对象，你在其它地方import这个组件的选项对象，然后在components注册这个局部组件时，实际上vue就会通过这个选项对象来构造一个新的vue组件实例的

或者可以参考Vue.extend() API, 你也可以自行使用这个API，传入一个组件的选项对象，来创建一个用于创建组件实例的构造函数，将其挂在到某个DOM元素下...

const componentInstance = Vue.extend({
    template: `<div>{{ text }}</div>`,
    data() {
        return {
            text: 'Hello, World'
        }
    }
})
new componentInstance.$mount('#app')