CODEWITHSUNDEEP
vue.jsobservable
Ritsaert Hornstra
Ritsaert Hornstra

Reputation: 5111

Vue.js big data passed via props is slow

In a Vue.js component I need to pass a a big 2D array as a property:

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

When passing the array I noticed this is quite slow. inspecting the array in Chrome I saw that all elements are now of type Observer and all nested elements are replaced by reactiveGetter / reactiveSetter pairs. I can imagine setting up this 2D array is quite expensive.

For my application I know that the array will always be immutable. It can be replaced but that is always as a whole, never separate elements.

Question: - Is there a possibility to pass the array as a single reactive entity instead of a very big bag of reactive elements? - What is best practice in this case?

Upvotes: 2

Views: 1474

Answers (2)

v-moe
v-moe

Reputation: 1433

Try this, bigData will have an observer, immutable won't:

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

Upvotes: 1

Hammerbot
Hammerbot

Reputation: 16334

You could pass it as a function getter, would it work for you?

<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>

Upvotes: 2

Related Questions