Chrome 和 Vue.js 中的 Datalist 的性能问题

Question

我在 vue.js 和 Google Chrome 中遇到数据列表的性能问题（最新版本：83.0.4103.97）。我不得不说我几个月前开始学习 Vue.js 所以我还是个菜鸟。使用 Firefox 一切正常，数据列表和过滤立即生效。使用 Chrome 一切都很慢......我在输入字段中键入，字母出现非常缓慢（或一次全部出现），我必须等待很多秒才能应用过滤器。在此之后，我必须多次单击该元素以填充该字段。这是浏览器行为和我的部分代码的视频。

火狐浏览器：https://streamable.com/vj4rbb

Chrome : https://streamable.com/2sikq5

组件代码：

<b-input-group size="sm" v-if="menuEditState">
  <b-form-input
    :list="`mealDish${meal.id}`"
    :id="`input${meal.id}`"
    placeholder="Selectionner un plat"
    v-model="name"
    :class="{'is-invalid': $v.name.$anyError}"
  />
  <datalist :id="`mealDish${meal.id}`">
    <option v-for="dish in activeDishesByType" :value="`${dish.name} (${dish.humanType})`" :data-value="dish.id"></option>
  </datalist>
  
  <b-input-group-append>
    <b-button variant="primary" @click="onClick" :disabled="loading">
      <i :class="loading ? 'fa fa-spin fa-circle-notch' : 'fa fa-plus'" />
    </b-button>
  </b-input-group-append>
</b-input-group>

和脚本

  computed: {
...mapGetters({
  activeDishesByType: 'activeDishesByType',
}),

getter 基于 getter 中的 Vuex 状态排序（如果我使用没有 getter 排序的状态，我有相同的行为）。

我知道 chrome 开发工具中有一个性能监视器，我试图找到可以帮助我修复此问题的东西，但我不知道在哪里搜索所有这些信息。

感谢您的帮助。

罗曼.

Answer 1

好的，所以我终于找到了 Chrome 中导致如此多性能问题的元素。它在数据列表选项中的值... 所以我设法在数据列表中只使用数据-*和文本。请毫不犹豫地对此进行改进或添加评论。

数据列表中没有更多“值”：

 <b-input-group size="sm">
  <b-form-input
    :list="`mealDish${meal.id}`"
    :id="`input${meal.id}`"
    placeholder="Selectionner un plat"
    v-model="name"
  />
  <datalist :id="`mealDish${meal.id}`">
    <option v-for="dish in activeDishesByType" :data-value="dish.id">{{
      `${dish.name} (${dish.humanType})`
    }}</option>
  </datalist>
  
  <b-input-group-append>
    <b-button variant="primary" @click="onClick" :disabled="loading">
      <i :class="loading ? 'fa fa-spin fa-circle-notch' : 'fa fa-plus'" />
    </b-button>
  </b-input-group-append>
</b-input-group>

并在数据列表选项中搜索以恢复我的数据值：

  // Get the selected/typed value
  const shownVal = document.getElementById(`input${this.meal.id}`).value;
  const datalist = document.querySelector(`#mealDish${this.meal.id}`);
  // Find the option in the list and get the data-value (id)
  let dishId = null;
  for (var i = 0; i < datalist.options.length; i++) {
    if (datalist.options[i].text === shownVal) {
      dishId = datalist.options[i].dataset.value;
      break;
    }
  }

Chrome 和 Vue.js 中的 Datalist 的性能问题

Performance problems with Chrome and Datalist in Vue.js

google-chrome

html-datalist

vue.js