最近使用Vue2.0開發項目,有一個列表使用v-for綁定到數組,按照Vue的推薦方案,使用push、splice、this.$set三個變異方法操作數組。發現在添加頁面,三個方法都能及時刷新視圖;但是在修改頁面,只有this.$set方法修改數組元素能刷新,其他兩個方法死活不刷新視圖,使用Vue-devtools查看,數據都能成功修改。
嘗試了在mount階段就用push方法一個個添加,嘗試把用到的對象都顯示定義字段屬性,嘗試百度到的N種方法...花了四五個小時,都不行!但問題肯定是出在沒有觸發Vue刷新視圖的條件上。
最終模擬了一個手工強制刷新的辦法:
1、html中增加一個hidden,綁定到一個flag字段:
2、mount階段給flag賦初值:
3、在push和splice后,修改flag的值!!!
思路:由於flag是簡單字段,它的變化肯定要刷新視圖,所以通過flag的變化,手工刷新視圖。
由此可見,Vue的視圖刷新是整體刷新,而不是只刷新變化的字段。