今天在写代码时遇到了一个大坑，需求是要实现文件的下载并且展示下载的实时进度
image(1).png
所以需要结合webSocket实时返回下载进度，然后把返回的数据实时渲染到页面上，但是发现使用
this.$set方法并没有生效。。。首先我们知道this.$set的用法，其实就是向响应式对象中添加一个属性，并且触发试图更新，举一个简单例子：
<template>
<div class="home">
<p>{{obj.age}}</p>
</div>
</template>
<script>
export default {
name: "HomeView",
components: {},
data() {
return {
obj:{
name:'xxx',
}
};
},
mounted() {
this.obj.age=20;
console.log(this.obj) //{name:'xxx',age:20}
},
methods: {},
};
执行这段代码会发现试图上并没有出现age的值，但是控制台里可以打印出来，这就设计到ES5中的Object.defineProperty方法了，这个方法有一个缺点就是不能监听到对象或数组属性的增加或删除，就导致了这一现象的发生。
vue中的双向数据绑定就是用这个方法实现，vue在创建实例的时候，会遍历data里的值，为对象的每个属性加上getter和setter方法，一旦这些属性对应的值更新了就会去触发对应的视图更新，而age这个属性不是vue实例化的时候就拥有的属性，所以vue并没有对这个属性进行getter和setter的监听，因此无法实现双向绑定，也就无法更新视图。
但是this.$set方法还有另一种情况，就是当你要设置的key已经存在于这个对象或数组中的时候，它只会更改data并不会为该key添加响应检测
image(2).png
所以页面上的依赖downProgress的试图就不会更新，解决这个问题的办法就是在设置值之前先把这个属性删除掉，然后再进行this.$set,
image(3).png
image(4).png
ok,完美解决~
