今天在寫代碼時遇到了一個大坑拂苹，需求是要實現(xiàn)文件的下載并且展示下載的實時進(jìn)度
image(1).png
所以需要結(jié)合webSocket實時返回下載進(jìn)度安聘，然后把返回的數(shù)據(jù)實時渲染到頁面上痰洒，但是發(fā)現(xiàn)使用
this.$set方法并沒有生效瓢棒。。丘喻。首先我們知道this.$set的用法脯宿，其實就是向響應(yīng)式對象中添加一個屬性，并且觸發(fā)試圖更新泉粉，舉一個簡單例子：
<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: {},
};
執(zhí)行這段代碼會發(fā)現(xiàn)試圖上并沒有出現(xiàn)age的值连霉，但是控制臺里可以打印出來，這就設(shè)計到ES5中的Object.defineProperty方法了嗡靡，這個方法有一個缺點就是不能監(jiān)聽到對象或數(shù)組屬性的增加或刪除跺撼，就導(dǎo)致了這一現(xiàn)象的發(fā)生。
vue中的雙向數(shù)據(jù)綁定就是用這個方法實現(xiàn)讨彼，vue在創(chuàng)建實例的時候歉井，會遍歷data里的值，為對象的每個屬性加上getter和setter方法哈误，一旦這些屬性對應(yīng)的值更新了就會去觸發(fā)對應(yīng)的視圖更新哩至，而age這個屬性不是vue實例化的時候就擁有的屬性，所以vue并沒有對這個屬性進(jìn)行g(shù)etter和setter的監(jiān)聽蜜自，因此無法實現(xiàn)雙向綁定菩貌，也就無法更新視圖。
但是this.$set方法還有另一種情況重荠，就是當(dāng)你要設(shè)置的key已經(jīng)存在于這個對象或數(shù)組中的時候箭阶，它只會更改data并不會為該key添加響應(yīng)檢測
image(2).png
所以頁面上的依賴downProgress的試圖就不會更新，解決這個問題的辦法就是在設(shè)置值之前先把這個屬性刪除掉戈鲁，然后再進(jìn)行this.$set,
image(3).png
image(4).png
ok,完美解決~
