如何在Vue 2中设置组件非反应数据？

Question

我有一个类别数组，它被加载一次（在创建的钩子中），然后它一直是静态的。我在组件模板中渲染此数组值。

<template>
    <ul>
        <li v-for="item in myArray">{{ item }}</li>
    </ul>
</template>

我的数据属性看起来（它不包括myArray - 我不想要反应绑定）：

data() {
    return {
        someReactiveData: [1, 2, 3]
    };
}

我的创建钩子：

created() {
    // ...
    this.myArray = ["value 1", "value 2"];
    // ...
}

问题是，Vue throw错误 - 我不能在模板中使用Array，因为在创建DOM时不会创建此变量 - 已挂载。

那怎么做？或者在哪里可以存储组件常量？

Answer 1

Vue将data选项中的所有属性设置为setter / getters以使它们具有反应性。见Reactivity in depth

由于您希望myArray是静态的，您可以将其创建为自定义选项，可以使用vm.$options访问

export default{
    data() {
        return{
            someReactiveData: [1, 2, 3]
        }
    },
    //custom option name myArray
    myArray: null,
    created() {
        //access the custom option using $options
        this.$options.myArray = ["value 1", "value 2"];
    }
}

您可以按如下方式迭代模板中的自定义选项：

<template>
    <ul>
        <li v-for="item in $options.myArray">{{ item }}</li>
    </ul>
</template>

这是fiddle

Answer 2

实际上，在this中设置created()的属性应该是开箱即用的：

<template>
  <div id="app">
    <ul>
      <li v-for="item in myArray" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.myArray = [
      'item 1',
      'item 2'
    ];
  }
};
</script>

将呈现

<div id="app">
  <ul>
    <li>
      item 1
    </li>
    <li>
      item 2
    </li>
  </ul>
</div>

在这里演示：https://codesandbox.io/s/r0yqj2orpn。

Answer 3

我更喜欢使用静态数据（非反应性），如下所示：

1. 使用以下内容创建一个mixin（我将其命名为static_data.js）
2. 在要使用静态数据的组件中，您可以执行以下操作：

注意：这段代码的天才是qamxsw poi评论中的samuelantonioli。

Answer 4

如果你想把它保存在here中，正确的方法是使用data，如Object.freeze()中所述：

唯一的例外是使用Object.freeze（），它可以防止现有属性被更改，这也意味着反应系统无法跟踪更改。