vue2 中 data 数据定义为 data的数据时， 方法里会取不到data?

Question

vue2(2.16.14) 中 data 数据定义为 data（this.xxx）的数据时， 方法里会取不到data？

这是一个有趣的问题，我暂时还没有去探究原因，不过可以给大家避坑。

我有个 test.vue 组件

<template>
  <div class="test">
  </div>
</template>
<script>

export default {
  name: 'test',
  data () {
    return {
      tabList: [{
        label: '哈哈哈', value: 'hahaha'
      }, {
        label: '嘿嘿嘿', value: 'heiheihei'
      }],
      tab: this.tabList[0].value,
    }
  },
  created() {
    console.log(this.tabList);
    this.show("created");
  },
  methods: {
    show(form) {
      console.log(`来自 ${ form }-- show被调用： `, this, 'tabList: ', this.tabList, 'tab: ',this.tab, 'method: ', this.test);
    },
    test() {
      console.log(1111);
    }
  }
}
</script>
<style scoped lang="scss">
</style>

我在其父组件中通过 this.$refs.test.show('父组件') 调用该方法时发现 this.data 为undefined，后面发现组件自身调用也存在这个问题。

然而方法却能取到，暂时做个记录（如有大佬帮忙解开迷雾，十分感谢。

Answer 1

this指的是什么？是不是当前vue实例？
this.tabList指的是什么？是不是data()中return的tabList属性？
在还没return的对象里访问对象中的属性会怎样？会收获undefined is not an object (evaluating 'this.tabList[0]')报错一枚。
这与vue无关,你的行为就好似下面这段JS：

var data = {
    tabList: [{
      label: '哈哈哈', value: 'hahaha'
    }, {
      label: '嘿嘿嘿', value: 'heiheihei'
    }],
    tab: data.tabList[0].value
}

Answer 2

在data函数中不能使用this

tab: this.tabList[0].value,
这一行出错导致data构造时出现异常。这个问题注意一下console的报错，应该有报错。