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