Vue中的data为什么要用return(Vue获取不到数据？)

今天自己在瞎折腾–导航栏,碰到忘记写data的问题了，因此衍生出两个问题

• data:{}跟data(){}的区别
• data中为何要使用return

提交一份导航栏的代码，再继续解决问题

html

<el-menu
  :default-active="activeIndex2"
  class="sv-head"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  >
  <template v-for="route in navBarData">
      <el-menu-item :key="route.go">
          <template slot="title">
            
              {{route.go}}
              
          </template>
      </el-menu-item>
  </template>

js

data(){
      return {

  
       navBarData:[
         {
              go:'1'
        },{
              go:'2'
        }
    ]
        }
  }

深入了解一下问题

• data:{}跟data(){}的区别

1. data:{}:是一个对象，JS中直接共享对象会造成引用传递，也就是说修改了一个地方的值（如a:1=>a:2）后所有引用都会跟着修改 （a:1=>a:2）
2. data():{}是一个函数

• data中为何要使用return

  在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。

我这个问题的组件名字是head，在home中调用，当我home中没有定义data时head也没有return时数据便不会顺利展示
因此我推断，如果你没有ruturn 你在home中使用的是home中的data。

如果不对，欢迎补充