$ установить замедление производительности в 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 требуется время, чтобы среагировать на изменение значения массива свойств. Если я просто удаляю $ set updateParameter, он немедленно отвечает. Как я могу решить эту проблему?

Редактировать Здесь я повторил на скрипке, когда я изменяю значение в раскрывающемся списке, требуется время для отражения: скрипка

Answer 1

Это происходит из-за использования индексов массива v-model, таких как ключи объектов, которые создают огромные массивы. Например, при выполнении следующих действий создается массив из 152 395 893 элементов, с которым в шаблоне будет работать очень медленно:

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

В массиве это число не является именем ключа, а представляет собой числовой индекс , То, что вы хотите, это объект. Это создает только 1 элемент:

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

Замените их оба на объекты:

currParameterValues: {},
currOperatorValues: {}

Настроенная Fiddle