Element上传组件监听fileList导致图片闪烁

场景：

如图所示，上传图片后图片先出现在右侧，然后才显示正常。很多人遇到这个bug是因为，在上传成功回调种用的push，改为直接赋值就好了。

    handleSuccess(res, file, fileList) {
      // this.fileList.push(file)
      this.fileList = fileList
    },

---

分析：

我的场景是：父子组件传值，监听了fileList，重新计算赋值了fileList导致了闪烁。切换表格，子组件中获取当前图片列表，子组件修改图片传值给父组件（用于缓存）。

---

解决：

父子组件传值时，子组件不要使用computed或者watch来监听fileList，用bus或者props传值即可。

  //父组件
  rowClick(row) {
    //this.SET_ROWDATA(row);

	bus.$emit('fankui', row);
  }

  //子组件
  // computed: {
  //   ROWDATA: function () {
  //     let ROWDATA = this.$store.state.wentifankui.ROWDATA
  //     let fileList = []
  //     if (ROWDATA && ROWDATA.fileList)
  //       fileList = ROWDATA.fileList.map(element => element = { url: this.imgHost + element });
  //     this.fileList = fileList
  //     return ROWDATA;
  //   },
  // },
  mounted() {
    //此处不用计算属性原因：保存时更新ROWDATA.fileList会重新计算改变fileList，造成闪烁
    bus.$off('fankui');
    bus.$on('fankui', (data) => {
      this.ROWDATA = data
      let fileList = []
      if (data && data.fileList)
        fileList = data.fileList.map(element => element = { url: this.imgHost + element });
      this.fileList = fileList
    });
  },
  methods: {
    handleSuccess(res, file, fileList) {
      this.fileList = fileList
      
      let fileLists = fileList.map(item => item.response && item.response.data || item.url.replace(this.imgHost, ""))
      this.ROWDATA.fileList = fileLists
    },
  }

参考：https://segmentfault.com/q/1010000021772862