今天在写代码时遇到了一个大坑,需求是要实现文件的下载并且展示下载的实时进度
所以需要结合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添加响应检测
所以页面上的依赖downProgress的试图就不会更新,解决这个问题的办法就是在设置值之前先把这个属性删除掉,然后再进行this.$set,
ok,完美解决~