在哪里声明不变的数据？

Question

我想在 Vue 组件中使用一些不会改变的数据。以下代码不起作用：

const numbers = [1, 2, 3]
new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="number in numbers">
    {{number}}
  </div>
</div>

错误提示失败

[Vue 警告]：属性或方法“数字”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

这些消息表明我试图以“反应性”方式使用numbers。然而，就我而言，数据预计不会改变（const 声明突出显示）。

我当然可以将numbers 推送到实例中，这很有效：

new Vue({
  el: "#app",
  data: {
    numbers: [1, 2, 3]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="number in numbers">
    {{number}}
  </div>
</div>

我对此感到有些不自在，我对“反应性”的理解是 data 是一个存放变化信息的地方（并且变化反映在 DOM 中）。

在 Vue 中使用常量（不变）数据的正确方法是什么？ （特别是在哪里声明）

Answer 1

1. 模板需要访问的所有数据必须在 Vue 实例上（data 或 computed）（您可以想象模板中的每个访问都以 this. 开头）并且有无路可走
2. 让您的数据成为 Vue 实例的一部分，使其具有反应性。通常它不是问题，但如果你有大量数据，你知道永远不会改变（性能）。在这种情况下，您可以使用来自 the docs 的提示并应用 Object.freeze()，这会使整个对象“无反应”，但也无法以任何方式进行更改
3. 您可以使用来自 Akryum（Vue 核心成员）的 this tip 微调数据，以创建具有一些属性反应性和一些非反应性的对象（仅适用于使用 Object.defineProperty 使数据反应性的 Vue2。我'稍后会尝试更新 Vue3 代理..)

选项 2. 可能是您的用例的最佳方法...