使用 nextTick set的原理(雙向繫結)

2021-10-25 15:57:49 字數 624 閱讀 6244

一、實現雙向繫結主要做了三件事

監聽data(observer),有變化就通知訂閱者(watcher)

訂閱到了變化的data,將其和dom節點結合起來,編譯成乙個 js物件,形成虛擬dom(即原始碼中的document fragment)

所有變化都已對應完成,繼而進行檢視更新(即把 document fragment 變成實際的dom樹)

二、$nexttick

在執行響應式時,乙個data的變化就建立乙個watcher,同乙個watcher被多次觸發只記錄一次,都被放入同個陣列中,並且同一時間只能有乙個watcher被計算(因為有個 dep.target 表示當前正在計算的watcher,是全域性唯一的變數)。當所有變化都對應完,才進行檢視更新。

那麼當資料更新後馬上就要操作dom時,此時實際dom樹並沒有發生改變,就會出錯。所以可以使用$nexttick,實際是獲取的更新後的dom,也可以理解為等到實際dom樹被更新了才去操作dom。

三、$set

雙向繫結監聽的是data() }裡定義過的變數,若未定義而直接在方法裡新增,是不能觸發監聽的。vue提供了$set實現雙向繫結。

data() ,

};},mounted() ,

rubyzip的使用 原

code require zip zip zip zipfile.open test.zip zip zipfile create code 這個例子比較簡單,這裡就不多說了,下面來看另乙個 code require zip zip require fileutils.rb unzip dir zi...

Ruby SQLite GUI使用實錄(原)

ruby sqlite gui是乙個簡單的 跨平台的sqlite資料庫管理工具,它使用ruby編寫,使用了ruby gtk2和activerecord後端。因此需要安裝gtk,至於activerecord在大家安裝rails時就裝好了,所以下面就不敘述了。code c ruby v ruby 1.8...

原 限制軟體的使用次數

在某些時候,比如出試用版啦 之類之類的啦 其實主要是試用版嘍,限制使用者的使用次數。我們一般通過往登錄檔寫一些標識值的方法來完成這個目的 以下為實現的 vc平台 mfc框架 1 unsigned char buffer 255 2 unsigned long length 3 unsigned lo...