Vue中的export default 和 data 为什么return？

Vue中的export default 和 data 为什么return？

export default {
  name: 'passenger-device',
  components: {
    chartsShow,
    tableShow
  },
  mixins: [mixinTree, backfillingMinx],
  
  props: {
    breadcrumbObj: Object,
    default () {
      return null
    }
  },
  data () {
    return {
      state: false,
      timeInitFlag: true,
      dateTimeObj: {}, // 时间控件抛出值
      allDataType: allDataType,
      defaultTime: defaultTime,
      netDefaultTime: defaultTime, // 保有量时间控件默认值
      dataType: 'in',
      allChartType: threeChartType
     } 

1. export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。

2. data使用return
Vue 实例内,单组件的data必须返回一个对象。

官方解释如下:

• data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！ 通过提供 data 函数，每次创建一个新实例后，我们能够调用 data函数，从而返回初始数据的一个全新副本数据对象。
  简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的问题。
• 不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

对比

在简单vue实例中看到的Vue实例中data属性是如下方式展示的：

let app= newVue({
    el:"#app",
    data:{
        msg:''
    },
    methods:{
       
    }
})

在使用组件化的项目中使用的是如下形式：

export default{
    data(){
        return {
            showLogin:true,
            // def_act: '/A_VUE',
            msg: 'hello vue',
            user:'',
            homeContent: false,
        }
    },
    methods:{
       
    }
}