element UI組件庫中，Upload組件上傳閃動問題

閃動問題復現

在上傳之后總是發現有閃動的現象，對其進行深入研究后發現，其閃動原因，是因為使用的file-list並不會自動添加上傳了的圖片，而需要由我們來人工來添加，而添加則必須使用on-success事件中自帶的參數去做賦值操作。

可以看到，圖片上傳成功后，圖片會有一個先向右，然后停頓片刻擺着位置后，返回左側的現象。

<template>
  <el-upload name="file" list-type="picture-card" :file-list="imgList" :on-success="onSuccess">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imgList: []
    }
  },
  methods: {
    // 文件上傳成功時的鈎子
    onSuccess(res, file, fileList) {
      // 直接對imgList數組做push操作
      this.imgList.push({ url: res.data.fileurl })
    }
  }
}
</script>

解決方案

直接上官方文檔，找到了on-success事件其實還有兩個參數，分別是file跟fileList，其中file是本次上傳成功的文件信息，fileList是已上傳成功的文件列表匯總。

  methods: {
    // 文件上傳成功時的鈎子
    onSuccess(res, file, fileList) {
      // 成功實現的版本1
      this.imgList.push(file);
      // 成功實現的版本2
      this.imgList = fileList;
    }
  }

無非就是使用其事件自帶的參數進行push或者直接重新賦值的操作。

成功了

總結

至此問題已經解決，而解決方案其實令博主有點窒息，博主並不清楚該框架的底層究竟對這兩個參數做了什么操作，為什么我們自己定義的list重新賦值也不行呢？

博主對此只能淺顯地將其打印出來看看，第一張圖為我們自己定義的新的list，第二張圖則為其回調事件中的參數。

 

其實其中有什么數據，對是否閃動並沒有任何影響，而set跟get的構造函數感覺應該也沒有影響，同樣對於數組項原型__proto__則是一樣的。
那么，問題就只有可能出在__ob__身上了，博主查了一下，這個東西是Vue底層做雙向數據綁定而添加的，仔細想想確實，使用新數組直接作賦值，是沒有__ob__這個東西的。