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 的列表数组并创建一组选择。现在，我想更改第二个选择的值，即 Select for Property当我更改 Select paramater 的值时对于使用 updateParameter 的相应命名空间方法。我通过使用 $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