javascript - 为什么符号计算的属性名称不能在 VUE 数据中使用

Question

在我的 webapp 中，我想使用符号来消除魔术字符串。

const tabType = {
    recWinRate: Symbol('recWinRate'),
    accRate: Symbol('accRate'),
    averageRate: Symbol('averageRate'),
    orderNum: Symbol('orderNum'),
}
const tabType2Num = {
    [tabType.recWinRate]: 0,
    [tabType.accRate]: 1,
    [tabType.averageRate]: 2,
    [tabType.orderNum]: 2,
}
const tabType2Str = {
    [tabType.recWinRate]: 'recWinRate',
    [tabType.accRate]: 'accRate',
    [tabType.averageRate]: 'averageRate',
    [tabType.orderNum]: 'orderNum',
}
export default {
    data() {
        return {
          status,
          status2Text,
          tabType2Num
            }
        }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

在 devtool 中，data.tabType 是正常的，但是 data.tabType2Num 和 data.tabType2Str 是空对象。我可以使用调试器观察 const tabType2Num 不为空，为什么 VUE 中的数据为空。

标签： javascriptvue.jsvuejs2