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

不念不忘少年蓝@ 2022-01-12 10:37 699阅读 0赞

今天自己在瞎折腾–导航栏,碰到忘记写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。

`如果不对，欢迎补充`