- 數(shù)據(jù)綁定的問(wèn)題捌浩。
看官方文檔的時(shí)候,發(fā)現(xiàn)一個(gè)疑問(wèn)工秩,當(dāng)我們異步操作改變一個(gè)根級(jí)別的data 的時(shí)候尸饺,我們經(jīng)常異步操作,然后拿到結(jié)果助币,直接賦值給這個(gè)對(duì)象浪听,那么問(wèn)題來(lái)了,這時(shí)候眉菱,這個(gè)對(duì)象是不是響應(yīng)式的呢迹栓,,
答案是肯定的俭缓。
操作的結(jié)果見(jiàn)下圖
為什么是這樣克伊,,而且和官方 推薦的操作方式不一樣华坦,第一個(gè)setTimeout也能成功呢愿吹。
this.project = Object.assign({},this.project,obj)
的方法明明不一樣,為什么第一個(gè)setTimeout可以變成響應(yīng)式的呢惜姐?
個(gè)人理解:
官方推薦的做法犁跪,只是深拷貝了這個(gè)隊(duì)象,最終結(jié)果是 讓這個(gè)對(duì)象等于一個(gè)新的對(duì)象歹袁,和我們直接賦值是一樣的坷衍。所以,条舔,這個(gè)時(shí)候枫耳。project是響應(yīng)式的,我們不用考慮去閱讀源碼就可以得到的推測(cè)( vue 官方并沒(méi)有說(shuō)改寫了Object.assgin()方法)
但是對(duì)于第二個(gè)setTimeout逞刷, 因?yàn)樽铋_(kāi)始我們?cè)谧铋_(kāi)始 vue的 init階段嘉涌,并不能給這個(gè)數(shù)據(jù)綁定set和get 的方法,最終夸浅,vue也不能變成響應(yīng)式的仑最,所以,即使帆喇,我們能在控制臺(tái)答應(yīng)出來(lái) list.a = ‘xxxxx' VUE的視圖層也不能響應(yīng)警医。
解決辦法:
這三種方法,都行坯钦。
另外還有一個(gè)比較容易 迷茫的地方:
為什么這里會(huì)渲染呢预皇,這個(gè)時(shí)候,難道 lala.text,是響應(yīng)式的么婉刀。答案是不是的吟温,如果我們代碼寫成這樣,
結(jié)果不能正常渲染 la.text 突颊。鲁豪。
為什么會(huì)是這樣的,我們要注意到律秃, VUE中DOM操作是一個(gè)異步的操作爬橡,會(huì)有一個(gè)延遲在的。
大致流程是這樣的棒动。
- this.la = {}, 會(huì)觸發(fā)setter,
- setter 通知相關(guān)指令進(jìn)行數(shù)據(jù)更新糙申,
- 然后 this.la['text'] = 'text'
- 指令開(kāi)始執(zhí)行。這個(gè)時(shí)候去訪問(wèn) this.la , la.text 已經(jīng)存在了船惨。
由此柜裸,我們來(lái)看一下第二種, 因?yàn)橹朗瑃his.la['text'] = 'text' 不能觸發(fā) setter 粘室,他不是響應(yīng)式的,所以卜范,即使我們?nèi)匀荒躢onsole.log ,但是衔统,不是響應(yīng)式的,根本不能觸發(fā) setter海雪, 就談不上更新了锦爵。
2 .對(duì) 生命周期的再次回顧 (比較重要的地方)
這個(gè)應(yīng)該是一個(gè)比較完整的生命周期的圖示。
之前有點(diǎn)理解偏差.
- 當(dāng)我們需要得到數(shù)據(jù)之后奥裸,要操作一波DOM的時(shí)候险掀,我們可以放在updated中去做,這時(shí)候就是當(dāng)數(shù)據(jù)更新完成湾宙,組件也更新DOM了樟氢。冈绊。。但是好像官方不推薦使用updated埠啃,推薦使用 nextTick 去做死宣。
- 看vue 源碼分析 之類的文章,得到的一些收獲
之所以碴开,vue能做到響應(yīng)式毅该,基本上是因?yàn)?initState做的事情。潦牛。