最近接觸到elementUI的上傳組件，一路順暢，就是在上傳之后總是發現有閃動的現象，博主對其進行深入研究后發現，其閃動原因，是因為使用的
file-list並不會自動添加上傳了的圖片，而需要由我們來人工來添加，而添加則必須使用on-success事件中自帶的參數去做賦值操作
閃動問題復現
可以非常明顯的看到，圖片上傳成功后，圖片會有一個先向右，然后停頓片刻擺着位置后，返回左側的現象。
<!-- 上傳組件，其中file-list綁定的參數為infoForm.effect --> <el-upload name="file" class="upload-demo" :action="root + 'goods/uploadImageToAliOss'" list-type="picture-card" :on-preview="patternRealPicPreview" :on-success="handleUploadPatternListSuccess" :on-remove="patternRemove" :file-list="infoForm.effect" :data="{ dir: 'goodsMask' }" :headers="uploaderHeader" :before-upload="handleBeforeUpload" > <i class="el-icon-plus"></i> </el-upload> // 對應的事件回調如下，這里只看上傳成功后的回調事件 handleUploadPatternListSuccess(response) { // 出現問題的版本1 this.infoForm.effect.push({ url: response.data }) // 出現問題的版本2 let list = [] this.infoForm.effect.forEach((item) => { list.push(item) }) list.push({ url: response.data, percentage: 100, status: 'success', response: response, }) this.infoForm.effect = list }
博主是在上傳成功的回調事件中，對effect做數組做處理。
版本1中博主直接對effect數組做push操作，博主此時便懷疑會不會是push搗的鬼，故出現了版本2。
版本2中博主是重新定義了一個list數組，將原本effect中的數據拿出來，再組合上新上傳的圖片數據，最后將這個新的list賦給effect。但是這樣做之后，還是出現了問題。
尋求解決方案
遇事查文檔，博主很果斷，直接上官方文檔，找到了
on-success事件其實還有兩個參數，分別是file跟fileList，
其中file是本次上傳成功的文件信息，fileList是已上傳成功的文件列表匯總。
博主想着，要不就拿這兩個參數試一下，一番搗鼓之后，驚喜的發現還真的成功了！
下邊放成功之后的效果圖以及相應的實現代碼：
可以非常明顯的看出來，閃動的現象已經消失了。
而其改動非常小：
handleUploadPatternListSuccess(response, file, fileList) { // 成功實現的版本1 this.infoForm.effect.push(file) // 成功實現的版本2 this.infoForm.effect = fileList }
無非就是使用其事件自帶的參數進行push或者直接重新賦值的操作。
總結
至此問題已經解決，而解決方案其實令博主有點窒息，博主並不清楚該框架的底層究竟對這兩個參數做了什么操作，為什么我們自己定義的
list作重新賦值也不行呢？
博主對此只能淺顯地將其打印出來看看，第一張圖為我們自己定義的新的list，第二張圖則為其回調事件中的參數。
其實其中有什么數據，對是否閃動並沒有任何影響（由上邊出現問題的代碼版本2可知），而
set跟get的構造函數感覺應該也沒有影響，同樣對於數組項原型__proto__則是一樣的。
那么，問題就只有可能出在__ob__身上了，博主查了一下，這個東西是Vue底層做雙向數據綁定而添加的，仔細想想確實，使用新數組直接作賦值，是沒有__ob__這個東西的
相關資料：