Vue.js большие данные передаются через реквизит медленно

Question

В компоненте Vue.js мне нужно передать большой 2D-массив как свойство:

props: {
    items: {
      type:                 Array,
      default:              []
    }
}

При прохождении массива я заметил, что это довольно медленно. осматривая массив в Chrome, я обнаружил, что все элементы теперь имеют тип Observer и все вложенные элементы заменяются парами реактивныйGetter / реактивныйSetter. Я могу себе представить, что установка этого 2D-массива довольно дорогая.

Для моего приложения я знаю, что массив всегда будет неизменным. Его можно заменить, но это всегда единое целое, а не отдельные элементы.

Вопрос: - Есть ли возможность передать массив как один реактивный объект вместо очень большого пакета реактивных элементов? - Какова лучшая практика в этом случае?

Answer 1

Попробуйте, у bigData будет наблюдатель, у неизменяемого нет:

data() {
    return {
        bigData: [[1, 2], [3, 4]]
    }
},
created() {
    this.immutable =[[1, 2], [3, 4]];
},
mounted() {
    console.log(this.immutable);
    console.log(this.bigData);
}

Answer 2

Вы могли бы передать его как функцию-получатель, это сработало бы для вас?

<template>
    <div>
        <your-component v-if="dataGetter" :your-prop="dataGetter"></your-component>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                dataGetter: null
            }
        },
        created () {
            const bigArray = [
                [1, 2, 3]
            ]

            this.dataGetter = () => {
                return bigArray
            }
        }
    }
</script>