最近一個項目開發中遇到這樣的問題:php
後端php已經返回了前端須要的數據,可是因爲數據過多(20條),致使前端渲染頁面時間很長,並且只有當控制檯的preview返回了數據纔會渲染。前端
首先是排查問題:是前端渲染問題仍是接口返回數據過慢的問題?起初,一旦數據過多時,preview的返回就會很慢,並且一旦返回前端就渲染完畢。這裏就誤導了開發,致使花了時間去排查接口,環境等的問題。開始覺得是接口返回慢,致使頁面加載等待,僅僅看preview是不行的,preview是將後端的接口翻譯爲前端能夠查看的js代碼。因此應該是頁面的渲染速度太慢,才致使preview返回慢。vue
其次定位前端頁面渲染代碼爲何慢:vue拿到list循環,遍歷爲form中的表單元素。當咱們將表單循環的部分代碼註釋,頁面渲染正常。20條數據,頁面中中的表單元素大概100個,且都使用了v-model雙向綁定方便修改。咱們將v-model修改成:value時,再去渲染就很正常,因此頁面加載慢的突破點就找到了,vue中過多的v-model致使內存泄漏。segmentfault
那麼怎麼處理這種問題呢?後端
看到不少博文建議,使用原生的select,可是這樣就沒法實現雙向綁定功能了。翻譯
目前這個問題尚未獲得很好的解決,我將最貼合這個問題的一個網址附載下面:雙向綁定
https://segmentfault.com/q/1010000010608719orm