$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。现在，我想更改第二个 select 的值，即 Select for Property 当我使用 updateParameter 方法更改相应命名空间的 Select paramater 的值时。我通过使用 $set 更新数组 currPropertyValues 来做到这一点。但是我观察到每当我更改参数选项时都需要一段时间（4-5 秒）来处理，因为 Vue 可能需要时间来对属性数组值的变化做出反应。如果我只是删除 $set updateParameter 它会立即响应。我该如何解决这个问题？

编辑在这里，我在 fiddle 上进行了复制，当我在下拉列表中更改一个值时，需要时间来反映：fiddle

Answer 1

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

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

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

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

将这两个都更改为对象：

currParameterValues: {},
currOperatorValues: {}

adjusted Fiddle

$set 降低了 Vue 的性能

$set slowing down performance in Vue

javascript

set

vue.js

vuejs2

v-for