Vue 2，如何在组件内进行静态数据声明

Question

data() {
    return {
      tableHeaders: [{name: "uma"}]
    };
  },

假设我在模板中使用 tableHeaders 来显示某些内容。

但是是否有必要在 data 属性内装饰 tableHeaders （因为，我不需要 tableHeaders 作为反应性属性。它将始终是静态的）。那么有什么替代方案吗？

由于 vue 的限制较少，几乎所有数据我们都会在 data 属性中声明为状态变量（这是个好方法吗？）。

Answer 1

在 Vue 组件中设置和使用静态数据的最简单方法是在created() 钩子中定义它：

<script>
export default {
// name, data() and other component's staff
        
created() {
  this.tableHeaders = [
    {name: 'uma'}
    {name: 'other one uma'}
  ]
}
};
</script>

现在您可以在组件的模板中使用它了：

<template>
<ul>
  <li v-for="item in tableHeaders" :key="item">{{ item.name }}</li>
</ul>
</template>

或者在组件的方法中使用它：

methods: {
    getTableHeaders: function() {
      return this.tableHeaders
    }
}