Question

在Vue.js组件中，我需要传递一个大型2D数组作为属性：

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

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

对于我的应用程序，我知道数组将始终是不可变的。可以替换它，但是它始终是一个整体，永远不会分开。

问题： -是否有可能将数组作为单个反应性实体而不是一大袋反应性元素传递？ -这种情况下的最佳做法是什么？

Answer 1

您可以将其作为函数获取器传递，对您有用吗？

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

Answer 2

尝试一下，bigData将有一个观察者，不可变的不会：

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

通过道具传递的Vue.js大数据很慢

2 个答案: