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

我有一个category数组,它被加载一次(在创建的钩子中),然后一直是静态的。我将此数组值呈现在组件模板中。

<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时未创建此变量-已装入。

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

Gil村村2020/03/12 15:56:48

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

var newObj = JSON.parse(JSON.stringify(obj));
梅小卤蛋梅2020/03/12 15:56:48

如果要保留在其中data,则正确的方法是使用Object.freeze(),如文档中所述

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

逆天小胖Mandy2020/03/12 15:56:48

Vue将data选项中的所有属性设置为设置器/获取器,以使其具有反应性。请参阅深度反应

由于您希望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>

这是小提琴