Vue中帶有__ob__: Observer的數組沒法遍歷的問題

1、問題描述

若是不是Push進數組不會出現__ob__: Observer

若是要使用push就會出現__ob__: Observer

參考：vue中{__ob__: Observer}

 

2、問題分析

獲取數組長度就是 this.chooseId.length 這個方法的，這個不要懷疑，而你 輸出this.chooseId.length 爲0 是由於，你獲取的時機不對，不信？你把 打印放在一個 setTimeout 函數裏。也就是說你尚未給 this.chooseId 添加數據的時候就獲取長度了。

__ob__: Observer這個屬性實際上是Vue監控變量產生的，緣由不在這裏。

 

3、解決和總結

別忘了Ajax是異步請求。

這裏我犯了個錯，其實不是數組沒法遍歷，是我在Ajax請求後直接遍歷了數組，因爲是異步的，第一時間Ajax請求還未收到返回參數，也就尚未添加到數組裏，遍歷時天然沒有內容。

解決方法就是

1.把Ajax請求設置爲同步的，即async屬性設置爲false;顯然這不是最好的解決方法，使用ajax就是爲了異步請求局部刷新，可是這樣設置完能保證在一個線程中運行，請求到數據填充結束才訪問。

2.根本解決，遍歷數組的操做寫在Ajax請求成功填充數組後。

$axios.get(url, {params: param})
            .then(response => {
　　　　　　　　　 // 填充數組操做
                // 在這裏遍歷數組操做
            }, err => {
            })
            .catch((error) => {
            })