javascript - $set 降低了 Vue 的性能

Question

下面是我的代码

    <div v-for="namespace in chosenNamespaces" v-bind:key="namespace.id">

<!--            Select the Parameter-->

    <select @change="updateParameter($event, namespace.id)" v-model="currParameterValues[namespace.id]">
        <option v-for="parameter in getParametersForNamespace(namespace.id)">{{parameter}}</option>
    </select>

<!--            Select Property -->

    <select @change="updatePropertyType($event, namespace.id)" v-model="currPropertyValues[namespace.id]">
        <option v-for="property in getPropertiesForNamespace(namespace.id)">{{property}}</option>
    </select>

    <!--            Select Item -->
    <select v-model="currItemValues[namespace.id]">
        <option v-for="item in getItemsForNamespace(namespace.id)">{{item}}</option>
    </select>
  </div>


methods: {
    updateParameter(data, id){
        ....
        this.$set(currParameterValues, id, data,target.value)
        this.$set(currPropertyValues, id, someValue)
    }

    updatePropertyType(data, id){
        ...
        this.$set(currPropertyValues, someThing, val)
    }
}

所以我有很多 div 循环遍历 chosenNamespaces 数组列表并创建一组选择。现在，当我使用 updateParameter< 更改相应命名空间的 Select paramater 值时，我想更改第二个选择的值，即 Select for Property/ 方法。我通过使用 $set 更新数组 currPropertyValues 来做到这一点。但我观察到，每当我更改参数选项时，都需要一段时间(4-5 秒)来处理，因为 Vue 可能需要时间来对属性数组值的变化使用react。如果我只是删除 $set updateParameter 它会立即响应。我该如何解决这个问题？

编辑 在这里，我在 fiddle 上复制了，当我更改下拉列表中的值时，需要时间来反射(reflect):fiddle

Answer 1

发生这种情况是因为使用了 v-model 数组索引(例如对象键)，这会创建巨大的数组。例如，执行以下操作会创建一个包含 152,395,893 个项目的数组，在模板中使用该数组会非常慢:

const arr = [];
arr[152395893] = '...';

对于数组，这个数字不是键的名称，而是数字索引。你想要的是一个对象。这仅创建 1 个项目:

const obj = {};
obj[152395893] = '...';

将它们都更改为对象:

currParameterValues: {},
currOperatorValues: {}

adjusted Fiddle