手寫vue原始碼 精簡版) 觀察者

2021-09-26 14:25:41 字數 1377 閱讀 9267

observer觀察的物件:observer實際是對data進行觀察,從而達到第2點中的目的

observer的目的:observer的目的有兩個。其一,依賴收集,其二,更新顯示

observer實現原理:: observer跟資料**一樣,是通過object.defineproperty(…)來實現的

具體而言,我們定義observer這麼乙個物件,在內部通過object.defineproperty(…)對data中的所有資料進行劫持,並給每個資料新增getter和setter,從而達到依賴收集和更新顯示的目的

這裡還有兩個概念需要明確,即什麼是依賴收集和更新顯示。

}

//}是乙個依賴,每乙個大括號表示式都是乙個依賴

//v-text='name'是乙個依賴,每乙個v-普通(非事件)指令都是乙個依賴

知道了什麼是依賴,那我們為什麼要把依賴收集起來呢?很顯然,這些依賴其實都對應了data中的乙個個資料,我們在檢視中用到了data中的資料,就形成了依賴。但檢視不可能一成不變,往往是需要互動的,有了互動data中的資料就會發生變化,資料變化了就需要更新檢視的顯示。所以,依賴收集的目的就是為了應對將來資料的變化,從而當依賴的資料發生變化時能夠準確的批量的更新依賴所在地的顯示。理解了observer後,我們就來實現一下observer:

//es6實現

class vue

hijackdata(data)

//拿到data中所有可列舉的屬性

object.keys(data).foreach(key => );

}}//觀察者實現

class observer

observe(data, key, val)

return val;

},set(newval)

val = newval;

dep.notify(); //當資料發生變化時,通知所有的依賴進行更新顯示

}});

}}//dep容器,data中的每個資料會對應乙個,用來收集並儲存依賴

class dep

//收集依賴

adddep(dep)

//通知更新

notify() );}}

這一節先到這,下一節我們來實現模版/指令編譯

下一節: 模版/指令編譯

ArrayList原始碼分析精簡版

若當前為空陣列,新增時取傳入的值和預設的容量中較大的,如傳入3,則用預設的10.當要add進第乙個元素時,mincapacity為1,在math.max 方法比較後,mincatacity為10.private static intcalculatecapacity object elementda...

Vue原始碼解析 實現觀察者OBserver

vue採用資料劫持配合訂閱者和發布者模式的方式 通過 object.defineproperty 的setter 和 getter 對資料進行劫持 在資料變化時,發布訊息給依賴器 dep 訂閱者 去通知觀察者watcher 做出對應的 函式 進行檢視更新 mvvm 作為繫結入口 整合observer...

junit原始碼學習 觀察者模式

testresult擔任發布者角色,擁有protected listflisteners 擔任觀察者角色 以下都是testresult類原始碼 registers a testlistener觀察者註冊 public synchronized void addlistener testlistene...