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抛出错误 - 我无法在模板中使用myArray，因为在创建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的{{1}}上设置属性应该可以直接使用：

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>

此处演示：https://codesandbox.io/s/r0yqj2orpn。

Answer 3

我喜欢这样使用静态数据（非反应性）：

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

注意：这段代码的巧妙之处在于注释here中的samuelantonioli。

Answer 4

如果要将其保留在data中，则正确的方法是使用Object.freeze()，如documentation中所述：

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

Answer 5

您可以尝试以下代码行。您可以复制对象并删除反应性。

var newObj = JSON.parse(JSON.stringify(obj));

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

5 个答案: