VUE中data里面this指向性问题

今天在写项目中遇到一个this指向性问题，花费了大量时间都没有查找到原因，最后与组里的大佬们一起研究了许久终于解决了，在此记录一下。

首先在模块里面有个属性值，用来判断表格行是否可以选中,默认值为true

private allowSelect = true;

在模块里面有一个public方法,用来更新模块里面的一个属性值。

setAllowSelect(allowSelect: boolean) {
    this.allowSelect = allowSelect;
}

然后有一个配置项需要通过以上的属性值去判断使用哪种配置,类似以下：

private options() = {
    judegSelectFn: record => !this.allowSelect && record.allow;
}

在该模块中首先外部会去调用setAllowSelect函数去更新allowSelect的值，改成false。之后会去配置表格，使用到上面说到的配置项，那么配置项按理说是用到更新后的allowSelect值才对。然而实际情况却是，在配置时打印出来的this.allowSelect值为true，并没有拿到更新后的值。

刚开始我一直以为是动态更新的问题，但通过debugger得知，allowSelect的值确实在配置之前就已经更新成false了。百思不得其解，最后求助导师，经过导师建议的debugger思路，经过一番艰难的debugger后我发现前后的this值竟然都不同。

在前面外部通过组件实例调用setAllowSelect方法时，打印出来的this值类似以下，是一个VueComponent实例对象

而在配置项的函数中打印出来的this值却发生了改变，是一个Vue组件实例对象，两者是不同的

在我千思也不得其解为什么这两者this会发生变化，求助组里大佬们，经过一番深刻探讨，最后大家恍然大悟，data中对象里面的this的指向会有问题。

data(){
  return {
     a: "123",
     b: {
        c: this.a
     }
  }
}

比如以上代码中，this.a就有问题，并不能拿到a里面的值，因为此时的this指向为b

搞清楚这个问题就好办了，直接将上面的配置改成计算属性，那么里面的this拿到的值就是外面正常的this值了。

private get options() {
    return {
        judegSelectFn: record => !this.allowSelect && record.allow;
    }
}