如何以最少的反应性将TypeScript常量传递给Vue模板

我想知道将常数传递给模板最有效的方法是什么。目前，我使用的是

数据

，但据我所知，它主要用于随时间变化的状态，并且Vue会向数据中添加事件侦听器。这些常量只是模板中用于输出的常量值，在应用程序的生命周期中它们永远不会更改

<template>
  <div>
   <input type="radio" name="color" :value=Colors.GREEN />
   <input type="radio" name="color" :value=Colors.RED />
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Colors from '@/viewmodels/colors';

export default Vue.extend({
    name: 'ExampleComponent',
    data() {
        return () => {
            Colors
        }
    }
})
</script>

从“Vue”导入Vue；
从“@/viewmodels/Colors”导入颜色；
导出默认Vue.extend({
名称：“ExampleComponent”，
数据（）{
return（）=>{
颜色
}
}
})

该决定基于

颜色的值是否会在组件的整个生命周期内发生变化。如果不改变，只需使用计算属性：


Vue.config.devtools=false；
Vue.config.productionTip=false；
常量颜色={
绿色：“#0F0”，
};
Vue.component（'ExampleComponent'{
名称：“ExampleComponent”，
模板：`
值：{Colors.GREEN}
`,
计算：{
颜色：（）=>颜色
}
})
新Vue({
el:“#应用程序”，
})
颜色定义的可能重复项

？它是枚举吗？