[vue]實做一個快速render的select控制項
在現有系統中,常有好幾仟甚至上萬筆的資料,需要綁定在select控制項,但是卻遇到了資料量太大,在某些瀏覽器需要等到好幾秒的時間,以chrome為例在不同電腦,有些需要等很久,有些則是很正常,無法排除瀏覽器的問題,那就只好從程式碼來下手,先來看一下我假設的例子
<template>
<div id="app">
<select v-model="model">
<option v-for="item in list" :key="item.id" :value="item.id">
{{item.name}}
</option>
</select>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
list: [],
model: 0
}
},
mounted () {
for (let i = 0; i < 10000; i++) {
this.list.push({
id: i, name: 'select' + i
})
}
}
}
</script>
<style>
</style>
以一萬筆來說,至少需要5秒才能綁定,而且因為javascript是單執行緒的問題,整個畫面會卡死不能動,為何會導致這種狀況呢?因為vue 2.0開始使用virtual dom的方式來追蹤整個畫面狀態的改變,這樣會讓畫面在觸發時,re render會很快速,但只要資料筆數太大的話,就無法解決這個問題,所以我們可以操作dom元素和原生javascript來達成快速初始化的需求,下面是example
<template>
<div id="app">
<select ref="fastSelect">
</select>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
model: 0
}
},
mounted () {
let options = `<option>please select</option>`
for (let i = 0; i < 10000; i++) {
options += `<option value="${i}">select${i}</option>`
}
this.$refs.fastSelect.innerHTML = options
}
}
</script>
<style>
</style>
實際上如果真的要自行包成元件的話,還有很多狀況得顧慮到,所以最後筆者便包成一個共用元件,並直接放到npm上面,如果你只是想要一個可以大量資料並快速初始化的話,就不用再自己刻輪子了,但必須得注意一下此元件在re render的時候,一定會比v-for的方式還要消耗資源哦,所以還是得視自己的需求使用,如果你也遇到了binding select過慢的問題,可以試著使用看看此元件是否能解決您的問題,以下則是github的位址。
https://github.com/kinanson/vue-fast-select