詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組

更新時間：2022年02月13日 12:06:30 作者：前端阿龍

這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

src/core/observer/index.js

在這里插入圖片描述

在這里插入圖片描述

當(dāng)data的數(shù)組對象中本來沒有某個屬性，然后點擊按鈕動態(tài)增加某個屬性的時候，此時此屬性是沒有g(shù)et和set的，也就是沒有響應(yīng)式機制，如果想要讓你動態(tài)增加的某個屬性有響應(yīng)式變化，那么就直接在數(shù)據(jù)的源頭給他初始化這個屬性，具體看下一條。
當(dāng)向后端返回的結(jié)果的數(shù)組對象中新增屬性的時候，建議首先循環(huán)賦值完成之后再賦值給對應(yīng)的data中的變量，這樣data中變量給每個數(shù)組對象里面的屬性都會加上get和set
例如：后端返回一個數(shù)組對象是 [{xx: 1},{xx: 2}],然后我們獲取到這個數(shù)組對象后把這個數(shù)組對象賦值給了this.list，那么我的data中的list的兩個數(shù)組對象中的xx屬性就有g(shù)et和set了，換句話說就是響應(yīng)式的了，如果我們想要點擊按鈕的時候動態(tài)給當(dāng)前數(shù)組對象中增加一個cc屬性，this.list[0].cc = 2, 請注意此時cc屬性雖然添加到了我們對應(yīng)的數(shù)組對象中，但是它不是響應(yīng)式的，想要解決這個問題，那就直接在獲取后端的數(shù)據(jù)的時候直接循環(huán)添加cc屬性，設(shè)置為空，然后再賦值給this.list就行了

調(diào)試

在這里插入圖片描述

我們可以看到上面的數(shù)組在最開始第一步的時候只有[1,2,3] 三個元素，然后當(dāng)我們執(zhí)行了push方法后增加了一個元素，且視圖也實時更新了，這是因為在源碼中vue對修改數(shù)組的方法做了響應(yīng)式的處理
我們再看第三第四部修改list數(shù)組也生效了，但是視圖并沒有實時更新，這是因為vue在對數(shù)組的處理上面只修改了一些數(shù)組的方法和對數(shù)組中對象增加了響應(yīng)式的操作，這是因為數(shù)組可能有很長，出于性能的考慮，沒有對數(shù)組的每一個元素都做響應(yīng)式的處理。如果我們想實現(xiàn)第三第四步響應(yīng)式可以使用數(shù)組的splice方法就行了