詳解vue數據響應式原理之數組
src/core/observer/index.js
src/core/observer/array.js arrayMethods
- 當data的數組對象中本來沒有某個屬性，然後點擊按鈕動態增加某個屬性的時候，此時此屬性是沒有get和set的，也就是沒有響應式機制，如果想要讓你動態增加的某個屬性有響應式變化，那麼就直接在數據的源頭給他初始化這個屬性，具體看下一條。
- 當向後端返回的結果的數組對象中新增屬性的時候，建議首先循環賦值完成之後再賦值給對應的data中的變量，這樣data中變量給每個數組對象裡面的屬性都會加上get和set
- 例如：後端返回一個數組對象是 [{xx: 1},{xx: 2}],然後我們獲取到這個數組對象後把這個數組對象賦值給瞭this.list，那麼我的data中的list的兩個數組對象中的xx屬性就有get和set瞭，換句話說就是響應式的瞭，如果我們想要點擊按鈕的時候動態給當前數組對象中增加一個cc屬性，this.list[0].cc = 2, 請註意 此時cc屬性雖然添加到瞭我們對應的數組對象中，但是它不是響應式的，想要解決這個問題，那就直接在獲取後端的數據的時候直接循環添加cc屬性，設置為空，然後再賦值給this.list就行瞭
調試
- 我們可以看到上面的數組在最開始第一步的時候隻有[1,2,3] 三個元素，然後當我們執行瞭push方法後增加瞭一個元素，且視圖也實時更新瞭，這是因為在源碼中vue對修改數組的方法做瞭響應式的處理
- 我們再看第三第四部修改list數組也生效瞭，但是視圖並沒有實時更新，這是因為vue在對數組的處理上面隻修改瞭一些數組的方法和對數組中對象增加瞭響應式的操作，這是因為數組可能有很長，出於性能的考慮，沒有對數組的每一個元素都做響應式的處理。如果我們想實現第三第四步響應式可以使用數組的splice方法就行瞭
總結
本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!