javascript - 如何在 Vue 2 中设置组件非 react 性数据？

Question

我有一个类别数组，它被加载一次(在创建的钩子(Hook)中)，然后它一直是静态的。我在组件模板中呈现这些数组值。

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

我的数据属性看起来(它不包括 myArray - 我不想要响应式(Reactive)绑定(bind)):

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

我的创建钩子(Hook):

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

问题是，Vue 抛出错误 - 我不能在模板中使用 myArray，因为这个变量不是在创建 DOM 时创建的 - 挂载。

那么如何做到这一点呢？或者组件常量可以存放在哪里？

Answer 1

Vue 将 data 选项中的所有属性设置为 setters/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