src/core/observer/index.js

src/core/observer/array.js arrayMethods

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

調(diào)試

• 我們可以看到上面的數(shù)組在最開(kāi)始第一步的時(shí)候只有[1,2,3] 三個(gè)元素，然后當(dāng)我們執(zhí)行了push方法后增加了一個(gè)元素，且視圖也實(shí)時(shí)更新了，這是因?yàn)樵谠创a中vue對(duì)修改數(shù)組的方法做了響應(yīng)式的處理
• 我們?cè)倏吹谌谒牟啃薷膌ist數(shù)組也生效了，但是視圖并沒(méi)有實(shí)時(shí)更新，這是因?yàn)関ue在對(duì)數(shù)組的處理上面只修改了一些數(shù)組的方法和對(duì)數(shù)組中對(duì)象增加了響應(yīng)式的操作，這是因?yàn)閿?shù)組可能有很長(zhǎng)，出于性能的考慮，沒(méi)有對(duì)數(shù)組的每一個(gè)元素都做響應(yīng)式的處理。如果我們想實(shí)現(xiàn)第三第四步響應(yīng)式可以使用數(shù)組的splice方法就行了

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!      

最新評(píng)論