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

JavaScript

Near西里泡芙

2020-03-12

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

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

第1100篇《如何在Vue 2中设置组件非反应数据?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Gil村村 2020.03.12

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

var newObj = JSON.parse(JSON.stringify(obj));
梅小卤蛋梅 2020.03.12

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

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

逆天小胖Mandy 2020.03.12

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>

这是小提琴

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android