如何在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抛出错误 - 我无法在模板中使用myArray,因为在创建DOM时不会创建此变量 - 已挂载.

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

Answer 1

Vue将data选项中的所有属性设置为setter/getters以使它们具有反应性.请参阅深度反应性

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

这是小提琴

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

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

static_data.js使用以下内容创建一个 mixin（我命名它）

import Vue from 'vue'

Vue.prototype.$static = {}

export default {
  beforeCreate () {
    const vue_static = this.$options.static
    const vue_static_destination = this.$static || this

    if (vue_static && typeof(vue_static) === 'function') {
      Object.assign(vue_static_destination, vue_static.apply(this))
    } else if (vue_static && typeof(vue_static) === 'object') {
      Object.assign(vue_static_destination, vue_static)
    }      
  }
}

在要使用静态数据的组件中，您可以执行以下操作：

import use_static_data from '@mixins/static_data'

export default {
  mixins: [use_static_data],

  static: () => ({
    static_value: 'Vue is awesome'
  }),

  created () {
    console.log(this.$static.static_value); // Vue is awesome
  }
}

还有一个包vue-static

学分在这里。

Answer 4

如果您想将其保留在 中data，正确的方法是使用Object.freeze()，如文档中所述：

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