this - 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的报错，应该有报错。