代码之家 › 专栏 › 技术社区 › Ritsaert Hornstra

通过道具传递的Vue.js大数据速度较慢

observable vue.js

0

Ritsaert Hornstra · 技术社区 · 7 年前

在Vue.js组件中,我需要传递一个大的2D数组作为属性:

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

当通过阵列时,我注意到这相当慢。在检查Chrome中的数组时,我看到所有元素现在都是Observer类型,所有嵌套元素都被reactiveGetter/reactiveSetter对替换。我可以想象设置这个2D阵列相当昂贵。

对于我的应用程序,我知道数组总是不可变的。它可以被替换,但它始终是一个整体,而不是单独的元素。

问题: -是否有可能将阵列作为单个反应实体而不是一大袋反应元素传递? -在这种情况下,最佳做法是什么?

2 回复 | 直到 7 年前

1

2

Hammerbot 7 年前

您可以将其作为函数获取程序传递,它对您有用吗?

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

2

v-moe 7 年前

试试这个,bigData会有一个观察者,immutable不会:

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