Vue.js 中 Chrome 和 Datalist 的性能问题 [英] Performance problems with Chrome and Datalist in Vue.js
问题描述
我在使用谷歌浏览器(最新版本:83.0.4103.97)的 vue.js 中的 datalist 存在性能问题.我不得不说我几个月前开始学习 Vue.js 所以我还是个菜鸟.使用 Firefox 一切正常,数据列表和过滤立即生效.使用 Chrome 一切都很慢......我在输入字段中输入,字母显示非常缓慢(或一次全部显示),我必须等待很多秒钟才能应用过滤器.在此之后,我必须在元素上多次单击以填充该字段.以下是浏览器行为和部分代码的视频.
I have a performance problem with datalist in vue.js with Google Chrome (latest version : 83.0.4103.97). I have to say i started to learn Vue.js few month ago so i m still a noob. With Firefox everything is ok, the datalist and filtering works instantly. With Chrome everything is slow... I type in the input field, the letters appear very slowly (or all at once) and i have to wait a lot of seconds for the filter applies. After this i have to click multiple times on the element to fill the field. Here are videos of both browsers behavior and parts of my code.
火狐: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 排序的状态,我有相同的行为).
The getter is based on a Vuex state sort in a getter (I have the same behavior if i use the state without the getter sorting).
我知道 chrome 开发工具中有一个性能监视器,我试图找到可以帮助我解决这个问题的东西,但我不知道在哪里搜索所有这些信息.
I know there is a performance monitor in chrome dev tools and i try to find something which could help me fixing this but i dont know where to search in all theses informations.
感谢您的帮助.
罗曼.
推荐答案
好的,我终于找到了是什么元素在 Chrome 中导致了如此多的性能问题.它在数据列表选项中的值...所以我设法在数据列表中只使用 data-* 和 text .请随时改进或添加评论.
Ok so i finally find what element was causing so much performances issues in Chrome. Its the value in the datalist options... So i managed to use only data-* and text in the datalist. Please dont hesitate to improve this or add comments.
不再有价值"在数据列表上:
No more "value" on the data-list :
<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>
以及在数据列表选项中搜索以恢复我的数据值:
And the search in the datalist options for bringing back my data-value :
// 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;
}
}
这篇关于Vue.js 中 Chrome 和 Datalist 的性能问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!