vue中的小坑

  1. 數據綁定的問題。
    看官方文檔的時候,發(fā)現一個疑問,當我們異步操作改變一個根級別的data 的時候,我們經常異步操作,然后拿到結果,直接賦值給這個對象,那么問題來了,這時候,這個對象是不是響應式的呢,,
    答案是肯定的。
test

操作的結果見下圖

測試結果

為什么是這樣,,而且和官方 推薦的操作方式不一樣,第一個setTimeout也能成功呢。

this.project = Object.assign({},this.project,obj)

的方法明明不一樣,為什么第一個setTimeout可以變成響應式的呢?

個人理解:

  • 官方推薦的做法,只是深拷貝了這個隊象,最終結果是 讓這個對象等于一個新的對象,和我們直接賦值是一樣的。所以,,這個時候。project是響應式的,我們不用考慮去閱讀源碼就可以得到的推測( vue 官方并沒有說改寫了Object.assgin()方法)

  • 但是對于第二個setTimeout, 因為最開始我們在最開始 vue的 init階段,并不能給這個數據綁定set和get 的方法,最終,vue也不能變成響應式的,所以,即使,我們能在控制臺答應出來 list.a = ‘xxxxx' VUE的視圖層也不能響應。

解決辦法:

方法三

這三種方法,都行。

另外還有一個比較容易 迷茫的地方:

test1
test1
result

為什么這里會渲染呢,這個時候,難道 lala.text,是響應式的么。答案是不是的,如果我們代碼寫成這樣,

test2

結果不能正常渲染 la.text 。。
為什么會是這樣的,我們要注意到, VUE中DOM操作是一個異步的操作,會有一個延遲在的。
大致流程是這樣的。

  • this.la = {}, 會觸發(fā)setter,
  • setter 通知相關指令進行數據更新,
  • 然后 this.la['text'] = 'text'
  • 指令開始執(zhí)行。這個時候去訪問 this.la , la.text 已經存在了。

由此,我們來看一下第二種, 因為,this.la['text'] = 'text' 不能觸發(fā) setter ,他不是響應式的,所以,即使我們仍然能console.log ,但是,不是響應式的,根本不能觸發(fā) setter, 就談不上更新了。

2 .對 生命周期的再次回顧 (比較重要的地方)

生命周期

這個應該是一個比較完整的生命周期的圖示。
之前有點理解偏差.

  • 當我們需要得到數據之后,要操作一波DOM的時候,我們可以放在updated中去做,這時候就是當數據更新完成,組件也更新DOM了。。。但是好像官方不推薦使用updated,推薦使用 nextTick 去做。
reson
  1. 看vue 源碼分析 之類的文章,得到的一些收獲
源碼

之所以,vue能做到響應式,基本上是因為 initState做的事情。。

init做的事
Obseve做的事
defineReactive
依賴收集
總結依賴收集
總結

文章參考:
vue源碼分析
關于VUE實例的生命周期

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容