Vue.set的使用

在工作中，我做了一个上传文件完毕时，让上传行闪一下的css样式，需要用到obj.blink让其blink样式效果在闪烁一次后消失。
HTML

<div class="uploaded-file-container" :class="{'blink':file.blink}" v-if="!file.uploading">
</div>

CSS

@-webkit-keyframes blink {
    0% {
        background-color: #eff1f6;
        opacity:1;
    }
    50% {
        background-color: #fefade;
    }
    100% {
        background-color: #eff1f6;
    }
}

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

uploadHandler(e){
      let files = e.target.files
      for(let i=0;i<files.length;i++){
        let file = files[i]
        let obj = {}
        obj.name = file.name
        obj.uploading = true
        obj.progress = 0
        this.fileStack.push(obj)
        //formData to upload
        let formData = new FormData();
        formData.append('file', file);
        let data = {}
        data.loanId = this.loanId
        data.docId = this.loanDocument.id
        data.filename = file.name
        data.file = formData
        //callback to get upload progress
        let callback = (progress)=>{
          obj.progress = progress + "%"
        }
        upload(data,callback).then((response)=>{
          setTimeout(()=>{
            obj.uploading = false
            this.validate()
                  obj.blink = true
                  setTimeout(()=>{
                    obj.blink = false
                    Vue.set(this.fileStack, this.fileStack[this.fileStack.length - 1], obj)//Due to limitations in JavaScript, Vue cannot detect the following changes to an array:When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
                  },2000)
          },1500)
        }).catch((err)=>{
          this.onError()
        })
      }
    },

我的解决方案是，在第二个setTimeout处令obj.blink = false。但是仅仅这样DOM并没有更新，blink的效果还在。于是查到VUE资料：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice： example1.items.splice(newLength)

所以，我在第二个setTimeout按上述增加了一行Vue.set代码

setTimeout(()=>{
 obj.blink = false
 Vue.set(this.fileStack, this.fileStack[this.fileStack.length - 1], obj)
},2000)

blink变成false，DOM上的效果得以实现。
注意
最终我把
Vue.set(this.fileStack, this.fileStack[this.fileStack.length - 1], obj)
改成了
this.fileStack.splice(this.fileStack.length - 1, 1, obj)
因为第一种只能让第一行生效，目前还不知道为什么。

=========================
详见Vue官方文档：注意事项
=========================

Vue.set的使用

推荐阅读更多精彩内容